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

總結

以上是生活随笔為你收集整理的React系列---Webpack环境搭建（二）不同环境不同配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。