development、production配置文件区分

问题描述

有些插件用于development模式，有些应用于production模式，为了避免每次打包都更改配置文件，开发和生产环境区分不同的文件，通过打包命令区分。

webapck.common.js

开发环境和生产环境共用的配置

webpack.dev.js

只有开发环境使用的配置

const path = require('path');
// 热更新
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common');

const devConfige = {
  // 开发、线上环境，默认为production，打包文件会被压缩
  mode: 'development',
  // development模式下，默认开启source-map
  devtool: 'cheap-module-eval-source-map',
  optimization: {
    // namedModules: true
    // 使用tree-shaking
    usedExports: true, // mode为production时，默认开启
  },
  // 插件，在webpack运行到某个时刻的时候，自动帮我们做一些事情
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
  // 开发环境 - 本地服务器
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
    open: true,
  }
};

module.exports = merge([commonConfig, devConfige]);

webpack.prod.js

只有生产环境使用的配置

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

const prodConfig = {
  // 开发、线上环境，默认为production，打包文件会被压缩
  mode: 'production',
  // development模式下，默认开启source-map
  devtool: 'cheap-module-source-map',
};

module.exports = merge([commonConfig, prodConfig]);

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server --config webpack.dev.js"
  },