webpack 4打包优化的过程（一）

根据官方文档（文档/指南/生产环境）的建议，我们将我们的webpack配置改成如下的目录
修改之前的配置

config
  |-dev.env.js
  |-index.js
  |-test.env.js
  |-prod.env.js
webpack.base.config.js
webpack.client.js

修改之后的配置

 utils
   |- webpack.common.js - 主要负责webpack的通用配置
   |- webpack.utils.js
 |- webpack.dev.js - 主要负责开发环境webpack的配置
 |- webpack.prod.js - 主要生产环境打包的配置

下面将三个文件的主要片段贴出来供大家参考哈
webpack.dev.js

const devWebpackConfig = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [{
        from: /.*/,
        to: path.posix.join('/', 'index.html')
      }]
    },
    hot: true,
    inline: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || 'localhost',
    port: PORT || 8080,
    open: false, // do not open browser by default when start webpack-dev-server
    overlay: { // browser error message mask
      warnings: false,
      errors: true
    },
    publicPath: '/',
    proxy: {
      '/': {
        target: localProxy(process.env.npm_config_env), // 代理地址，这里设置的地址会代替axios中设置的baseURL
        secure: false, // 接受对方是https的接口
        // ws: true, // proxy websockets
        changeOrigin: true // 是否需要跨域
        // pathRewrite: {
        //   '^/': '',
        // }
      }
    },
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: false
    }
  }
});

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || 8080;
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err);
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port;
      // add port to devServer config
      devWebpackConfig.devServer.port = port;
      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [
            'Your application is running here:',
            ...friendlyErrorsPluginFacade(pageConfig, devWebpackConfig)
          ]
        },
        //   onErrors: config.dev.notifyOnErrors ?
        //     utils.createNotifierCallback() :
        //     undefined
        onErrors: undefined
      }));
      resolve(devWebpackConfig);
    }
  });
});

webpack.common.js - 因为原代码比较长就直接贴出来供大家参考

webpack.prod.js

const merge = require('webpack-merge');
const common = require('./utils/webpack.common');
module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map'
});

打包的结果如下，主要是将sourcemap从源文件分离出来，减小体积

打包以后我们发现webpack在打包过程中有warning信息，这将在下一篇文章中和大家分享如何进一步进行优化目前存在的问题