记一次webpack优化免费邮官网 ym.163.com-CSDN博客

做官网，自然不能用spa，上ssr又有点大材小用，于是使用了传统开发模式+webpack

主要用到的plugin

html-webpack-plugin 生成html模板

clean-webpack-plugin 文件夹清除

copy-webpack-plugin 文件拷贝

extract-text-webpack-plugin 抽离css

主要用到的loader

style-loader 在html中生成style标签
css-loader 转化css文件 如import
babel-loader 转化es6，7.
url-loader 打包css图片或to base64
html-withimg-loader 转化html里的图片

再加上一个webpack简单配置项

new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            output: {
                // 移除 JavaScript 内注释
                comments: false
              }
        }),

提取公共代码

 optimization: {
        splitChunks: {
          cacheGroups: {
            // 打包业务中公共代码
            common: {
              name: "common",
              chunks: "initial",
              minSize: 1,
              priority: 0,
              minChunks: 2, // 同时引用了2次才打包
            },
            // 打包第三方库的文件
            // vendor: {
            //   name: "vendor",
            //   test: /[\\/]node_modules[\\/]/,
            //   chunks: "register",
            //   priority: 10,
            //   minChunks: 2, // 同时引用了2次才打包
            // }
          }
        },
        // runtimeChunk: { name: 'manifest' } // 运行时代码
      },

基本就算配置完了，使用urlloader之后 首页加载速度快了很多，最后给文件加上hash

记录一下踩到的坑

• 根据系统路径来取文件名，window和linux不一致
• js的单行注释打包之后影响后面的代码（线上）
• mobilesite.github.io/2017/02/18/…