Webpack系列——不同模式的打包

Development 和 Production 模式的区分打包

在不同模式下的配置上，存在着大量相同的代码，对于这些重复代码可以将它们分离出来共用，提高代码效率。

1.webpack-merge

插件安装：

npm install webpack-merge -D

这个插件可以将不同配置合并在一起，也就是可以将共用的配置和不同模式下的配置进行合并，这样就可以节约大量代码的书写。

(1)共用配置

新建一个文件 webpack.common.config.js （文件名可以自己起），用于编写共用配置。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
​
module.exports = {
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 5 * 1024
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
        sideEffects: true
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: true
            }
          },
          'sass-loader',
          'postcss-loader'
        ],
        sideEffects: true
      },
      {
        test: /\.(eot|ttf|woff|woff2)$/i,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'fonts/'
          }
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
}

(2)开发环境的配置

新建文件：webpack.dev.config.js

const path = require('path');
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common.config.js');
​
const devConfig = {
  mode: 'development',
  optimization: {
    usedExports: true
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    open: true,
    compress: true,
    port: 9000,
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}
​
module.exports = merge(devConfig, commonConfig);

(3)生产环境的配置

新建文件：webpack.prod.config.js

const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common.config.js');
​
const prodConfig = {
  mode: 'production',
  devtool: 'cheap-module-source-map'
}
​
module.exports = merge(prodConfig, commonConfig);

2.package.json的设置

在完成配置以后，我们还需要写一些脚本，方便运行打包。

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

注意：

1.一般我们会把两个配置文件放在一个叫做 build 的文件夹中。

2.配置 dev 和 build 命令时，dev 是需要启动本地服务器，所以使用的是 webpack-dev-server，而 build 是生产环境打包，不需要打开本地服务器，直接 webpack 进行打包即可。

3.配置命令时要添加 --config 指定配置文件，同时也要注意文件的路径。