React系列Webpack环境搭建（一）手动搭建React系列Webpack环境搭建（二）不同环境不同配置React系列Webpack环境搭建（三）打包性能优化
实际项目中，往往不同环境有不同的构建需求。比如开发、测试和生产环境对应的后端接口地址不同，生产环境需要进行代码混淆、压缩等。
因此，往往还需要将webpack配置分成多个：
安装webpack-merge，用于合并配置：
npm install webpack-merge --save-dev
安装uglifyjs-webpack-plugin，用于js代码压缩：
npm install uglifyjs-webpack-plugin --save-dev
webpack -p也可以用于代码压缩。相对而言，使用uglifyjs-webpack-plugin，可以对压缩进行更灵活的控制。
拆分webpack.config.js为以下几个配置：
基础配置 webpack.base.config.js：
const path = require('path');const webpack = require('webpack');const ROOT_PATH = path.resolve(__dirname);const SRC_PATH = path.resolve(ROOT_PATH, 'src');const BUILD_PATH = path.resolve(ROOT_PATH, 'dist');module.exports = { entry: { index: path.resolve(SRC_PATH, 'index.jsx') }, output: { path: BUILD_PATH, filename: 'js/[name].[hash:5].js' }, resolve: { extensions: ['.js', '.jsx'] }, module: { loaders: [ { test: /\.jsx?$/, loaders: ['eslint-loader'], include: SRC_PATH, enforce: 'pre' }, { test: /\.jsx?$/, loaders: ['babel-loader'], include: SRC_PATH, exclude: path.resolve(ROOT_PATH, 'node_modules') } ] }};
开发环境配置,webpack.dev.config.js：
const path = require('path');const webpack = require('webpack');const HtmlwebpackPlugin = require('html-webpack-plugin');const merge = require('webpack-merge');const baseCOnfig= require('./webpack.base.config.js');const ROOT_PATH = path.resolve(__dirname);const SRC_PATH = path.resolve(ROOT_PATH, 'src');const devCOnfig= merge(baseConfig, { devtool: 'eval-source-map', plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' }), new HtmlwebpackPlugin({ title: 'react-webpack-demo', filename: 'index.html', template: path.resolve(SRC_PATH, 'templates', 'index.html') }) ]});module.exports = devConfig;
测试环境配置,webpack.test.config.js：
const path = require('path');const webpack = require('webpack');const HtmlwebpackPlugin = require('html-webpack-plugin');const merge = require('webpack-merge')const baseCOnfig= require('./webpack.base.config.js');const ROOT_PATH = path.resolve(__dirname);const SRC_PATH = path.resolve(ROOT_PATH, 'src');const testCOnfig= merge(baseConfig, { plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"test"' }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, }), new HtmlwebpackPlugin({ title: 'react-webpack-demo', filename: 'index.html', template: path.resolve(SRC_PATH, 'templates', 'index.html'), minify: { removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, removeAttributeQuotes: true } }) ]});module.exports = testConfig;
生成环境配置,webpack.prod.config.js：
const path = require('path');const webpack = require('webpack');const HtmlwebpackPlugin = require('html-webpack-plugin');const merge = require('webpack-merge')const baseCOnfig= require('./webpack.base.config.js')const ROOT_PATH = path.resolve(__dirname);const SRC_PATH = path.resolve(ROOT_PATH, 'src');const prodCOnfig= merge(baseConfig, { plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, }), new HtmlwebpackPlugin({ title: 'react-webpack-demo', filename: 'index.html', template: path.resolve(SRC_PATH, 'templates', 'index.html'), minify: { removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, removeAttributeQuotes: true } }) ]});module.exports = prodConfig;
修改package.json：
"scripts": { "start": "webpack-dev-server --hot --progress --config webpack.dev.config.js", "build:dev": "rimraf dist
React系列Webpack环境搭建（一）手动搭建React系列Webpack环境搭建（二）不同环境不同配置React系列Webpack环境搭建（三）打包性能优化