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环境搭建(三)打包性能优化