webpack4.29.x成神之路（十四） 区分开发和生产环境

目录

上节： 摇树优化(tree shaking)

上节目录如下：

环境介绍

webpack的mode选项有三个值：development | production | none, 分别看下不同模式下webpack的默认配置：

详细参考：https://webpack.js.org/config...

从默认配置也可以看出，开发和生产模式下的配置很不一样，所以是有必要给开发和生产环境分别写一份配置。

开始

现在webpack.config.js的内容大概是这样的：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'bundles')
  },

  // 开启devServer
  devServer: {},

  
  // optimization: {
  //   // production模式下默认开启
  //   usedExports: true
  // },

  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }, {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin()
  ]
};

根目录下新建一个目录webpack, 并将webpack.config.js复制两份到该目录下，
重命名为webpack.dev.js和webpack.prod.js，目录如下：

先来写开发环境下的配置，
webpack/webpack.dev.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: resolve(__dirname, '../bundles')
  },

  devtool: 'cheap-module-eval-source-map',

  // 开启devServer
  devServer: {},


  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }, {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
};

生产环境下的配置，
webpack/webpack.prod.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const { resolve } = require('path');
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash:10].js',
    path: resolve(__dirname, '../bundles')
  },

  devtool: 'cheap-module-source-map',

  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }, {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin()
  ]
};

开发环境去掉了CleanWebpackPlugin，postcss-loader
生产环境去掉了devServer
并且都设置了不同devtool和output.filename

然后修改package.js的scripts属性：

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

因为配置文件的名称和路径都变了，所以要用--config来指定
这时npm run build或npm run dev一切正常，配置也已区分。

抽离公共配置

现在两种模式下的配置文件有很多的是相同的，我们需要把它们抽离出来。
新建webpack/webpack.base.js,并把公共配置添加进去。
webpack/webpack.base.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: resolve(__dirname, '../bundles')
  },


  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
};

// 然后把webpack.dev.js和webpack.prod.js里的公共代码删除。
webpack/webpack.dev.js:

module.exports = {
  mode: 'development',
  output: {
    filename: '[name].js'
  },
  devtool: 'cheap-module-eval-source-map',

  // 开启devServer
  devServer: {},

  module: {
    rules: [{
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader']
    }]
  }
};

webpack/webpack.prod.js:

const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  mode: 'production',
  output: {
    filename: '[name].[contenthash:10].js'
  },

  devtool: 'cheap-module-source-map',

  module: {
    rules: [{
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
};

然后用webpack-merge插件把webpack.base.js合并到webpack.dev.js和webpack.prod.js里去.

继续修改配置
webpack/webpack.dev.js:

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');
module.exports = merge(baseConfig, {
  mode: 'development',
  output: {
    filename: '[name].js'
  },
  devtool: 'cheap-module-eval-source-map',

  // 开启devServer
  devServer: {},

  module: {
    rules: [{
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader']
    }]
  }
});

merge函数返回合并后的配置对象，webpack.prod.js也一样：

const CleanWebpackPlugin = require('clean-webpack-plugin');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');
module.exports = merge(baseConfig, {
  mode: 'production',
  output: {
    filename: '[name].[contenthash:10].js'
  },
  devtool: 'cheap-module-source-map',
  module: {
    rules: [{
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
});

然后安装：npm i webpack-merge -D
装完后再试下npm run dev和npm run build，效果应该还是正常的。

环境变量

到目前为止，区分配置其实已经完成，根目录下的webpack.config.js已经可以删了，但我们经常会看到很多人在一个文件中就做到区分配置，这里就需要用到环境变量。这里只介绍这种方式的做法，后续并不会用这种方式。
比如我只想用webpack.config.js这一个配置文件，那么可以这么写：
webpack.config.js:

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const merge = require('webpack-merge');

const baseConfig = {
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: resolve(__dirname, './bundles')
  },


  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
};



const devConfig = {
  mode: 'development',
  output: {
    filename: '[name].js'
  },
  devtool: 'cheap-module-eval-source-map',

  // 开启devServer
  devServer: {},

  module: {
    rules: [{
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader']
    }]
  }
}

const prodConfig = {
  mode: 'production',
  output: {
    filename: '[name].[contenthash:10].js'
  },
  devtool: 'cheap-module-source-map',
  module: {
    rules: [{
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
}

module.exports = env => {
  return env === 'development' ? merge(baseConfig, devConfig) : merge(baseConfig, prodConfig);
}

最后导出的配置取决于env的值，这个值在命令行中设置，比如：
运行开发环境：npx webpack-dev-server --env development
运行生产环境：npx webpack-dev-server --env production

如果配置过于复杂，还可以将loader或plugin单独分离出去

下节：代码分割(code spliting)上