前言
前三章介绍了项目搭建和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 (
<div class="test">
hello react-apps-template
</div>
)
}
}
ReactDom.render(<App/>,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"
分别执行测试，如下图：
打包结果如下图
源码请看release0.0.1版本源码0.0.1
下一篇：多页面配置 react+webpack4.x搭建前端项目之多页面配置
