webpack_02_进阶配置

这篇承接上一篇webpack_01_基础配置

清理构建产物

在前面，我们每打一次包，如果chunks变了那么dist目录下就会冗余很多文件，所以我们需要一个每次在我们构建的时候清理dist目录的插件

npm i clean-webpack-plugin

这里我们在代码中引入的时候有个小坑，直接const xxx= require(‘clean-webpack-plugin’)在打包的时候会报错，正确的引入方式如下

webpack.prod.js

plugins:[
	//清理构建文件 clean-webpack-plugin 避免每次构建前需要手动删除dist
	new CleanWebpackPlugin()
]

添加css3前缀loader

这个是利用postCss插件autoprefixer来在打包后自动生成css3前缀

npm i postcss-loader autoprefixer -D

安装完后，在module下的rules数组中 比如用的less那么继续在use里面配置插件对象

webpack.prod.js -> module -> rules

//解析less
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader, //使用这个插件loader会与style-loader冲突 一个是提取css为单独文件，一个是将css提为<style></style>插入head标签
          //'style-loader',
          "css-loader",
          "less-loader",
          //增加postcss-loader 来添加前缀
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [  //这里箭头函数返回一个数组
                require("autoprefixer")({
                  overrideBrowserslist: ["last 2 version", ">1%", "ios 7"]
                })
              ]
            }
          }

px转rem loader

在开发移动的时候，为了适配我们一般选择使用rem来作为计量单位，这里配合lib-flexible来动态的改变根目录的font-size大小

npm i px2rem-loader  -D
npm i lib-flexible -S

同样在use数组下多配置一项

{
   loader: "px2rem-loader",
   options: {
     remUnit: 75, //代表一个rem = 75 px 单位
     remPrecsion: 8 //代表px转换成rem的时候 小数点后面的位数
   }
 }

除了这样做外 还需要在根页面html文件中加入lib-flexible

资源内联

在代码层面意义：

1. 页面框架的初始化脚本
2. 上报相关打点（css请求完成 js请求完成）
3. css内联避免页面闪动（首屏css）

在请求层面

1. 减少HTTP请求
2. 小图片或者字体内联

这里使用raw-loader来解析

npm i raw-loader -D

source-map

对应webpack配置中的devtool配置项，实际上webpack中的sourcemap的基本类型包括：eval，cheap,moudule，inline,source-map。

1. eval:使用eval包裹模块代码
2. source-map:产生map文件
3. cheap:打印的信息不包含列信息，定位到行
4. inline:将.map作为DataURl嵌入，不单独生成.map文件
5. module:包含loader的sourcemap

对应可以参考这篇文章source-map

tree-shaking(摇树优化)

理解：1个模块可能有多个方法，只要其中的某个方法被其他页面使用了，则整个文件会被打到bundle去，tree shaking只会把使用的方法打入bundle，未使用的会在uglify阶段被删除掉

使用：webpack默认支持，在.babelrc里面设置modules:false即可
mode为production的情况下默认开启

要求：必须是es6的语法
对应可以参考这篇文章tree-shaking

多页面打包

后续补充

提取公共资源

后续补充