Webpack's development and production differentiated environment packaging

(1) Front

Originally, there was only one webpack configuration file, webpack.config.js. Now it is split into two according to the environment. The new webpack.dev.js and webpack.prod.js represent the webpack configuration files of the development environment and the production environment respectively.

webpack.dev.js

var webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin') // 引入插件
module.exports = {
  // css、js都是从入口文件开始 css、js都是通过import引入js
  entry: {
    index: './src/index.js'
  },
  devtool: 'inline-source-map',
  mode: 'development',
  devServer: {
    publicPath: '/',
    open: true,
    hotOnly: true, // 即使 HMR 不生效 也不要刷新浏览器页面
    hot: true, // 开启hmr
    // 端口号
    port: 8000
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: __dirname + 'node_modules',
      include: __dirname + 'src',
      options: {
        presets: ['env', {
          useBuiltIns: 'usage'
        }] // 版本
      }
    }, {
      test: /\.css$/,
      loader: ['style-loader', 'css-loader'] // 从右向左，先执行css-loader再style-loader
    }, {
      test: /\.less$/,
      loader: ['style-loader', {
        loader: 'css-loader',
        options: {
          modules: true
        }
      }, 'less-loader', 'postcss-loader']
    }, {
      test:/\.scss$/,
      loader: ['style-loader', 'css-loader', 'scss-loader']
    }, {
      test:/\.html$/,
      loader: ['html-loader']
    }, {
      test: /\.(png|jpg|gif|svg)$/i,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]', // 自定义打包后的图片名称
          outputPath: 'image/', // 打包后生成的图片放到dist下的image文件夹下
          limit: 2048
        }
      }
    }]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['index'],
      inject: 'true',
      minify: {
        removeComments: true, // 删除注释
        collapseWhitespace: true // 删除空格
      }
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    usedExports: true
  }
}

In webpack.prod.js, many online can be omitted, such as hot update, devServer, Tree Shaking, etc.

webpack.prod.js：

var webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin') // 引入插件
module.exports = {
  // css、js都是从入口文件开始 css、js都是通过import引入js
  entry: {
    index: './src/index.js'
  },
  devtool: 'inline-source-map',
  mode: 'production',
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: __dirname + 'node_modules',
      include: __dirname + 'src',
      options: {
        presets: ['env', {
          useBuiltIns: 'usage'
        }] // 版本
      }
    }, {
      test: /\.css$/,
      loader: ['style-loader', 'css-loader'] // 从右向左，先执行css-loader再style-loader
    }, {
      test: /\.less$/,
      loader: ['style-loader', {
        loader: 'css-loader',
        options: {
          modules: true
        }
      }, 'less-loader', 'postcss-loader']
    }, {
      test:/\.scss$/,
      loader: ['style-loader', 'css-loader', 'scss-loader']
    }, {
      test:/\.html$/,
      loader: ['html-loader']
    }, {
      test: /\.(png|jpg|gif|svg)$/i,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]', // 自定义打包后的图片名称
          outputPath: 'image/', // 打包后生成的图片放到dist下的image文件夹下
          limit: 2048
        }
      }
    }]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['index'],
      inject: 'true',
      minify: {
        removeComments: true, // 删除注释
        collapseWhitespace: true // 删除空格
      }
    })
  ]
}

At this time, the webpack configuration files of the production environment and the online environment are just fine

package.json modification:

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

Production environment: npm run dev

Online environment: npm run build (packaged)

(2) Remove the public code

Now webpack.dev.js and webpack.prod.js have part of the common code, and now the common code can be extracted

webpack.common.js (common code)

const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: __dirname + 'node_modules',
      include: __dirname + 'src',
      options: {
        presets: ['env', {
          useBuiltIns: 'usage'
        }] // 版本
      }
    }, {
      test: /\.css$/,
      loader: ['style-loader', 'css-loader'] // 从右向左，先执行css-loader再style-loader
    }, {
      test: /\.less$/,
      loader: ['style-loader', {
        loader: 'css-loader',
        options: {
          modules: true
        }
      }, 'less-loader', 'postcss-loader']
    }, {
      test:/\.scss$/,
      loader: ['style-loader', 'css-loader', 'scss-loader']
    }, {
      test:/\.html$/,
      loader: ['html-loader']
    }, {
      test: /\.(png|jpg|gif|svg)$/i,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]', // 自定义打包后的图片名称
          outputPath: 'image/', // 打包后生成的图片放到dist下的image文件夹下
          limit: 2048
        }
      }
    }]
  },
  output: {
    filename: 'bundle.[hash].js',
    path: path.resolve(__dirname, 'dist')
  }
}

webpack.prod.js: Introduce the common code file webpackCommon

const htmlWebpackPlugin = require('html-webpack-plugin') // 引入插件
const webpackCommon = require('./webpack.common.js')
module.exports = {
  // css、js都是从入口文件开始 css、js都是通过import引入js
  entry: webpackCommon.entry,
  devtool: 'inline-source-map',
  mode: 'production',
  module: webpackCommon.module,
  plugins: [
    new htmlWebpackPlugin({
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['index'],
      inject: 'true',
      minify: {
        removeComments: true, // 删除注释
        collapseWhitespace: true // 删除空格
      }
    })
  ],
  output: webpackCommon.output
}

webpack.dev.js: Introduce the common code file webpackCommon

var webpack = require('webpack')
const webpackCommon = require('./webpack.common.js')
const htmlWebpackPlugin = require('html-webpack-plugin') // 引入插件
module.exports = {
  // css、js都是从入口文件开始 css、js都是通过import引入js
  entry: webpackCommon.entry,
  devtool: 'inline-source-map',
  mode: 'development',
  devServer: {
    publicPath: '/',
    open: true,
    hot: true, // 开启hmr
    // 端口号
    port: 8000
  },
  module: webpackCommon.module,
  plugins: [
    new htmlWebpackPlugin({
      template: 'public/index.html',
      filename: 'index.[hash].html',
      chunks: ['index'],
      inject: 'true',
      minify: {
        removeComments: true, // 删除注释
        collapseWhitespace: true // 删除空格
      }
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    usedExports: true
  },
  output: output
}

The above is to configure webpack by environment~