静态页面应用webpack后的比较

背景

一个纯html页面，有图片、css和js，经过添加webpack的基本配置，可以实现开发调试，build打包为原静态页面

• mode为development时的打包结果

• mode为production时的打包结果（production时默认开启了压缩优化和tree shaking）

添加性能配置

将小于8k的图片转为base64

添加url-loader; 配置连接：juejin.cn/post/684490…

   {
          loader:'url-loader',
          options:{
              esModule:false,
              limit:8192 //图片小于8k  webpack会对图片做base64，编译到js文件中
              name:'img/[name].[hash:16].[ext]'
          }
      }

对图片进行压缩

添加：image-webpack-loader； 配置连接：juejin.cn/post/684490…

    {
        loader:'image-webpack-loader'
      }

提取出css

添加：mini-css-extract-plugin

 {
      test:/\.css$/,
      use:[
        MiniCssExtractPlugin.loader,//代替style-loader的位置
      //   {
      //   loader:'style-loader',
      //   options:{
      //       injectType:'singletonStyleTag'
      //   }
      //  },
        {
        loader:'css-loader',
        options:{
            esModule:true
        }
        },
        'postcss-loader'
      ]
    },

//添加plugins
plugins:[
  new MiniCssExtractPlugin()
]

压缩css

添加：optimize-css-assets-webpack-plugin

//添加plugins
plugins:[
  new MiniCssExtractPlugin(),
  new OptimizeCssAssetsWebpackPlugin({
    assetNameRegExp:/\.css$/g,
     cssProcessor:require('cssnano')
 })
]