webpack生产、开发环境的拆分合并

• webpack.base.config.js里面写公共的配置

  const path = require('path')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  
  module.exports = {
      entry: {
          main: './src/index.js'
      },
      output: {
          filename: '[name].js',
          path: path.resolve(__dirname, 'dist')
      },
      plugins: [
          new HtmlWebpackPlugin({
              template: './src/index.html'
          })
      ],
  }
  

• webpack.dev.config.js里面合并开发环境的配置

  const commonConfig = require('./webpack.base.config')
  const { smart: merge } = require('webpack-merge')
  const devConfig = {
      mode: "development"
  }
  // 调用smart方法进行合并
  module.exports = merge(commonConfig, devConfig)
  

• webpack.prod.config.js里面合并生产环境的配置

  const commonConfig = require('./webpack.base.config')
  const { smart: merge } = require('webpack-merge')
  const prodConfig = {
      mode: "production"
  }
  module.exports = merge(commonConfig, prodConfig)
  

•  "scripts": {
      "build:dev": "webpack --config ./build/webpack.dev.config.js",
      "build": "webpack --config ./build/webpack.prod.config.js"
    },