webpack 4+ 学习（5）

生产环境构建

配置

开发环境（development）和生产环境（production）的构建目标差异很大。在开发环境中，需要具有强大的，实时重新加载或热模替换能力的 source map 和 localhost server 。 而在生产环境中，目标则转向于关注更小的 bundle ， 更轻量的 source map，以及更优化的资源，以改善加载时间。所以通常每个环境编写彼此独立的 webpack 配置

这时会遵循不重复原则，保留一个 "通用"配置，然后使用 webpack-merge 的工具合并代码

安装 webpack-merge

npm install --save-dev webpack-merge

项目目录

  webpack-demo
  |- package.json
- |- webpack.config.js
+ |- webpack.common.js
+ |- webpack.dev.js
+ |- webpack.prod.js
  |- /dist
  |- /src
    |- index.js
    |- math.js
  |- /node_modules

webpack.common.js

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

module.exports = {
    entry : {
      app : './src/index.js'
    },
    output: {
        filename: "[name].bundle.js",
        path : path.resolve(__dirname,'dist')
    },
    module: {
      rules : [
          {
              test : /\.css$/,
              use : [
                  'style-loader',
                  'css-loader'
              ]
          },
          {
              test : /\.(png|jpeg|jpg)$/,
              use : [
                  'file-loader'
              ]
          }
      ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title : 'Production',
            template : './src/index.html'
        })


    ]
}

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common');


module.exports = merge(common,{
    devtool : 'inline-source-map',
    devServer:{
        contentBase : './dist'
    }
})

webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')


module.exports = merge(common,{
    plugins : [
        new UglifyJsPlugin()
    ]
})