React技术栈之Webpack环境搭建二不同环境不同配置

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'],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.API_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.API_ENV': '"test"'
        }),new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,}),'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.API_ENV': '"production"'
        }),removeAttributeQuotes: true
            }
        })
    ]
});

module.exports = prodConfig;

修改package.json：

"scripts": {
    "start": "webpack-dev-server --hot --progress --config webpack.dev.config.js","build:dev": "rimraf dist && webpack --progress --config webpack.dev.config.js","build:test": "rimraf dist && webpack --progress --config webpack.test.config.js","build": "rimraf dist && webpack --progress --config webpack.prod.config.js"
},

# 启动开发调试
npm run start
# 开发环境构建
npm run build:dev
# 测试环境构建
npm run build:test
# 生产环境构建
npm run build

项目中就可以像下面这样子调用后端接口

接口HOST定义，host.js：

if (process.env.NODE_ENV === 'development') {
  module.exports = `http://192.168.1.101:8000`
} else if (process.env.NODE_ENV === 'test') {
  module.exports = `http://192.168.1.102:8000`
} else {
  module.exports = `http://192.168.1.103:8000`
}

接口API定义，apis.js：

import host from './host'

function getApi (api) {
  return host + api
}

export default {
  login: getApi('/login'),logout: getApi('/logout'),...
}

代码：https://github.com/zhutx/reac...

React技术栈之Webpack环境搭建（一）手动搭建
React技术栈之Webpack环境搭建（二）不同环境不同配置
React技术栈之Webpack环境搭建（三）打包性能优化