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环境搭建(一)手动搭建 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |