react+webpack4.x搭建前端项目（四）配置抽取和区分环境

前言 前三章介绍了项目搭建和webpack打包优化。 1、react+webpack4搭建前端项目（一）基础项目搭建 2、react+webpack4搭建前端项目（二）react全家桶的使用 3、react+webpack4搭建前端项目（三）打包优化 接下来，我们接着上一篇文章react+webpack4搭建前端项目（三）打包优化进行webpack配置的提取和区分（开发，测试，生产）环境和编写脚本进行打包 简化项目代码 把src下的代码删除，新建index.js import React from 'react' import ReactDom from 'react-dom' import "./app.less" class App extends React.Component { render(){ return ( ) } } ReactDom.render(,document.getElementById("app")) app.less .test { color: purple; font-size: 20px; display: flex; justify-content: space-between; align-items: center; } 执行npm run dev， npm run build测试正常 区分不同环境 在webpack4.x之后，webpack内置了process.env.NODE_ENV这个环境变量而且只有两个值（development开发，production生产），但是我们项目一般都会有开发开环境，测试环境，预发布环境，生产环境等等。 所以这里我们需要在package.json添加打包测试环境的执行命令 "build-test": "cross-env NODE_ENV=test webpack --progress --config build/webpack.prod.config.js" 然后我们通过webpack之内的插件在webpack配置中添加另外一个全局环境变量（只要不和NODE_ENV重名就行） 我们在webpack.base.config.js中的plugins中添加如下代码 new Webpack.DefinePlugin({ 'process.env': { APP_ENV:JSON.stringify(process.env.NODE_ENV) }, }), 这样我么就为项目注入了全局变量APP_ENV，我们可以在app.js中打印APP_ENV的值测试一下 console.log(process.env.APP_ENV) 接着我们分别执行npm run dev，npm run build-test，npm run build查看打印的值。 那么我们怎么看打包后的项目呢，我们之前介绍过http-server工具，在打包成功后 cd dist http-server 根据提示打开浏览器，打开控制台查看就可以 webpack配置的提取 我们在utils.js中编写公用的cssLoaders方法来处理css，less function cssLoaders(options){ options = options || {}; const cssLoader = { loader: 'css-loader', // 转换css options:{ sourceMap: options.sourceMap } }; function generateLoaders(loader,loaderOptions){ const loaders = [cssLoader,'postcss-loader']; if(loader){ loaders.push({ loader: loader+"-loader", options:Object.assign({},loaderOptions , { sourceMap: options.sourceMap }) }) } if(options.extract){ return [ { loader:MiniCssExtractPlugin.loader, options:{ hmr: process.env.NODE_ENV != 'development', // 开发环境热更新 ，然而不起作用 reloadAll:true, } } ].concat(loaders); }else{ return ['style-loader'].concat(loaders) } } const object = { css: generateLoaders(), less: generateLoaders("less") } const output = []; for(let key in object){ const loader = object[key]; output.push({ test:new RegExp('\\.' + key + '$'), use:loader }) } return output; } 然后我们把webapck.base.config.js处理css，less相关的loader删除，分别在webpack.dev.config.js，webpack.prod.config.js中添加处理css的loader webpack.dev.config.js如下 module:{ rules:utils.cssLoaders() }, webpack.prod.config.js如下 module:{ rules:utils.cssLoaders({extract:true,sourceMap:true}) }, 测试环境不需要压缩css。生产环境需要对css文件进行压缩和输出sourceMap 接下来把webpack.base.config.js中的output修改成不再文件名后添加后缀配置 output: { path : utils.resolve("../dist"), filename: utils.assetsPath("js/[name].js") , publicPath: "/" // 打包后的资源的访问路径前缀 }, 在webpack.prod.config.js中添加output output: { path : utils.resolve("../dist"), filename: utils.assetsPath("js/[name].[hash].js") , chunkFilename: utils.assetsPath("js/[name].[chunkhash].js"), publicPath: "/" // 打包后的资源的访问路径前缀 }, 这样的话，开发环境js文件就不会带hash后缀喽 然后把webpack.base.config.js下的plugins中的 new MiniCssExtractPlugin({ filename: utils.assetsPath('css/[name].[hash].css'), chunkFilename: utils.assetsPath('css/[id].[chunkhash].css'), }) 移到webpack.prod.config.js，这样开发环境css也不会带hash后缀喽 这里的文件开发环境就不需要去hash后缀名喽，如果需要的话，那也需要分区开发环境和打包环境 编写build.js打包 我们可以编写一个js脚本，然后用在node命令执行这个脚本，在这个脚本中进行webpack打包。 我们需要利用webpack提供的方法webpack(config,handler)， 该方法的第一个参数是webpack的配置对象，第二个是webpack打包执行结果的回调 新建build/build.js文件 安装ora，chalk npm install -D ora chalk ora是用于在shell终端显示加载中的效果,类似于前端页面的loading效果 chalk是用于在shell终端输出带颜色颜色文本的插件 这两款插件的具体使用方法请看官网文档 编写build.js const webpack = require("webpack") const ora = require("ora"); const chalk = require("chalk") const WebpackConfig = require("./webpack.prod.config") // 启动动画 const spinner = ora("build....") spinner.start() // 开始构建 webpack(WebpackConfig,function(err,stats){ // 停止动画 spinner.stop() // 打包出错，抛出异常信息 if (err) throw err // 控制台输出打包成功信息 process.stdout.write(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + '\n\n') console.log(chalk.cyan(' Build complete.\n')) console.log(chalk.yellow( ' Tip: built files are meant to be served over an HTTP server.\n' + ' Opening index.html over file:// won\'t work.\n' )) process.exit(); // 终止终端进程 }) 然后修改package.json的打包命令 "build-test": "cross-env NODE_ENV=test node build/build.js", "build": "cross-env NODE_ENV=production node build/build.js" 分别执行测试，如下图： QQ截图20191213125331.png 打包结果如下图 QQ截图20191213125345.png 源码请看release0.0.1版本源码0.0.1 下一篇：多页面配置 react+webpack4.x搭建前端项目之多页面配置

本文章由javascript技术分享原创和收集