為什么我們要做三份 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 上的絕對路徑，或相對路徑）
const ASSETS_PUBLIC_PATH = '/assets/';
module.exports = {
 context: SRC_PATH, // 設置源代碼的默認根路徑
 resolve: {
 extensions: ['.js', '.jsx'] // 同時支持 js 和 jsx
 },
 entry: {
 // 注意 entry 中的路徑都是相對于 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 優先級高于其他 JS 相關的 loader
 test: /\.jsx?$/,
 exclude: /node_modules/,
 loader: 'eslint-loader'
 },
 {
 test: /\.jsx?$/,
 exclude: /node_modules/,
 // 建議把 babel 的運行時配置放在 .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: [
 // 每次打包前，先清空原來目錄中的內容
 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 相關的配置項
config.devServer = {
 contentBase: './',
 publicPath: '/assets/'
};
// 有關 Webpack 的 API 本地代理，另請參考 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/
 }
);
// 真實場景中，React、jQuery 等優先走全站的 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) => {
 // 這里有一個私有的約定，如果 entry 是一個數組，則證明它需要被 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')
 }),
 // 啟動 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 邏輯
 },
 ...
}