WebPack的使用及属性配、打包资源

WebPack(静态模块打包工具)(webpack默认只识别js和json内容)

WebPack的作用

把静态模块内容压缩、整合、转译等（前端工程化）
1️⃣把less/sass转成css代码
2️⃣把ES6+降级成ES5
3️⃣支持多种模块文件类型，多种模块标准语法

export、export default、module.exports、exports

导出方法的区别：参考文章

WebPack的使用(WebPack支持ECMA语法)

//--save-dev 表示在开发环境中使用而不安装到全局
npm i webpack-cli --save-dev

在package.json中加入自定义命令build(自己定义的，一般都用build)

运行工具命令

npm run build

生成dist文件

生成的main.js为src目录下的压缩文件，运行打包好的文件如下

修改WebPack打包入口和出口

点击查看webpack文档

在根目录下创建webpack.config.js文件，进行修改配置

可以在出口中添加 clean:true 来清空dist重新创建

打包资源

WebPack自动生成HTML

插件 html-webpack-plugin:在webpack打包时生成html文件
下载：

npm install --save-dev html-webpack-plugin

配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin()],//默认生成一个最简单的html5页面  //HtmlWebpackPlugin({template:path.join(_dirname,'文件路径')})  //以指定文件为模板
//    plugins: [new HtmlWebpackPlugin({ template: path.resolve(__dirname, './public/index.html') })]
};

webpack打包css模块

npm i css-loader style-loader --save-dev

   module: {
        rules: [{
            test: /\.css$/i,
            use: ["style-loader", "css-loader"]
        }]
    }

打包less模块

//less-loader将less转为css，因为浏览器只认识css
 module: {
        rules: [{
            test: /\.css$/i,
            use: ["style-loader", "css-loader"]
        },
        {
            test: /\.less$/i,
            use: ["style-loader", "css-loader","less-loader"]
        }]
    }

打包图片

//type:‘asset’,根据文件大小（8kb）小于:把文件转成base64打包进js文件中（减少网络请求次数），大于：文件复制到输出的目录下

//在入口文件中引入图片
import img from './assets/logo.png'

babel编译器

WebPack开发服务器

还需要配置package.json文件，同时切换模式为开发者模式（不进行打包），自动监听入口文件的变化

运行服务器
npm run dev
//自动打开网页修改配置为
 "dev": "webpack server --open --mode=development"

打包模式

开发环境调错-source map

可以定位错误具体的位置而不是错误在压缩文件中的位置

注意：只在开发环境下使用

解析别名alias

在webpack.config.js中配置
在入口文件中使用别名时，入口文件会到webpack中通过别名找真正的路径

配置：