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'],
                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 && 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環境搭建（三）打包性能優化