為什么我們要做三份 Webpack 配置文件

const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
// 配置常量
// 源代碼的根目錄（本地物理文件路徑）
const SRC_PATH = path.resolve('./src');
// 打包后的資源根目錄（本地物理文件路徑）
const ASSETS_BUILD_PATH = path.resolve('./build');
// 資源根目錄（可以是 CDN 上的絕對(duì)路徑，或相對(duì)路徑）
const ASSETS_PUBLIC_PATH = '/assets/';
module.exports = {
 context: SRC_PATH, // 設(shè)置源代碼的默認(rèn)根路徑
 resolve: {
  extensions: ['.js', '.jsx'] // 同時(shí)支持 js 和 jsx
 },
 entry: {
  // 注意 entry 中的路徑都是相對(duì)于 SRC_PATH 的路徑
  vendor: './vendor',
  a: ['./entry-a'],
  b: ['./entry-b'],
  c: ['./entry-c']
 },
 output: {
  path: ASSETS_BUILD_PATH,
  publicPath: ASSETS_PUBLIC_PATH,
  filename: './[name].js'
 },
 module: {
  rules: [
   {
    enforce: 'pre', // ESLint 優(yōu)先級(jí)高于其他 JS 相關(guān)的 loader
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'eslint-loader'
   },
   {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    // 建議把 babel 的運(yùn)行時(shí)配置放在 .babelrc 里，從而與 eslint-loader 等共享配置
    loader: 'babel-loader'
   },
   {
    test: /\.(png|jpg|gif)$/,
    use:
    [
     {
      loader: 'url-loader',
      options:
      {
       limit: 8192,
       name: 'images/[name].[ext]'
      }
     }
    ]
   },
   {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    use:
    [
     {
      loader: 'url-loader',
      options:
      {
       limit: 8192,
       mimetype: 'application/font-woff',
       name: 'fonts/[name].[ext]'
      }
     }
    ]
   },
   {
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    use:
    [
     {
      loader: 'file-loader',
      options:
      {
       limit: 8192,
       mimetype: 'application/font-woff',
       name: 'fonts/[name].[ext]'
      }
     }
    ]
   }
  ]
 },
 plugins: [
  // 每次打包前，先清空原來(lái)目錄中的內(nèi)容
  new CleanWebpackPlugin([ASSETS_BUILD_PATH], { verbose: false }),
  // 啟用 CommonChunkPlugin
  new webpack.optimize.CommonsChunkPlugin({
   names: 'vendor',
   minChunks: Infinity
  })
 ]
};

const webpack = require('webpack');

// 讀取同一目錄下的 base config
const config = require('./webpack.base.config');

// 添加 webpack-dev-server 相關(guān)的配置項(xiàng)
config.devServer = {
 contentBase: './',
 publicPath: '/assets/'
};
// 有關(guān) Webpack 的 API 本地代理，另請(qǐng)參考 https://webpack.github.io/docs/webpack-dev-server.html#proxy 
config.module.rules.push(
 {
  test: /\.less$/,
  use: [
   'style-loader',
   'css-loader',
   'less-loader'
  ],
  exclude: /node_modules/
 }
);
// 真實(shí)場(chǎng)景中，React、jQuery 等優(yōu)先走全站的 CDN，所以要放在 externals 中
config.externals = {
 react: 'React',
 'react-dom': 'ReactDOM'
};

// 添加 Sourcemap 支持
config.plugins.push(
 new webpack.SourceMapDevToolPlugin({
  filename: '[file].map',
  exclude: ['vendor.js'] // vendor 通常不需要 sourcemap
 })
);
// Hot module replacement
Object.keys(config.entry).forEach((key) => {
 // 這里有一個(gè)私有的約定，如果 entry 是一個(gè)數(shù)組，則證明它需要被 hot module replace
 if (Array.isArray(config.entry[key])) {
  config.entry[key].unshift(
   'webpack-dev-server/client?http://0.0.0.0:8080',
   'webpack/hot/only-dev-server'
  );
 }
});
config.plugins.push(
 new webpack.HotModuleReplacementPlugin()
);
module.exports = config;

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 讀取同一目錄下的 base config
const config = require('./webpack.base.config');
config.module.rules.push(
 {
  test: /\.less$/,
  use: ExtractTextPlugin.extract(
   {
    use: [
     'css-loader',
     'less-loader'
    ],
    fallback: 'style-loader'
   }
  ),
  exclude: /node_modules/
 }
);
config.plugins.push(
 // 官方文檔推薦使用下面的插件確保 NODE_ENV
 new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
 }),
 // 啟動(dòng) minify
 new webpack.LoaderOptionsPlugin({ minimize: true }),
 // 抽取 CSS 文件
 new ExtractTextPlugin({
  filename: '[name].css',
  allChunks: true,
  ignoreOrder: true
 })
);
module.exports = config;

{
 ...
 "scripts": {
  "build": "webpack --optimize-minimize",
  "dev": "webpack-dev-server --config webpack.dev.config.js",
  "start": "npm run dev" // 或添加你自己的 start 邏輯
 },
 ...
}