前言
前三章介紹了項目搭建和webpack打包優(yōu)化悟狱。
1、react+webpack4搭建前端項目（一）基礎(chǔ)項目搭建
2堰氓、react+webpack4搭建前端項目（二）react全家桶的使用
3挤渐、react+webpack4搭建前端項目（三）打包優(yōu)化
這里小編推薦一個福利，更多精彩內(nèi)容請點擊鏈接双絮，點擊這里
接下來浴麻，我們接著上一篇文章react+webpack4搭建前端項目（三）打包優(yōu)化進行webpack配置的提取和區(qū)分（開發(fā)，測試囤攀，生產(chǎn)）環(huán)境和編寫腳本進行打包
簡化項目代碼
把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;
}
執(zhí)行npm run dev陨亡， npm run build測試正常
區(qū)分不同環(huán)境
在webpack4.x之后泰演，webpack內(nèi)置了process.env.NODE_ENV這個環(huán)境變量而且只有兩個值（development開發(fā)炼蛤，production生產(chǎn)）帽揪，但是我們項目一般都會有開發(fā)開環(huán)境旺订，測試環(huán)境疆前，預(yù)發(fā)布環(huán)境迄本，生產(chǎn)環(huán)境等等认境。
所以這里我們需要在package.json添加打包測試環(huán)境的執(zhí)行命令
"build-test": "cross-env NODE_ENV=test webpack --progress --config build/webpack.prod.config.js"
然后我們通過webpack之內(nèi)的插件在webpack配置中添加另外一個全局環(huán)境變量（只要不和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)
接著我們分別執(zhí)行npm run dev，npm run build-test叉信，npm run build查看打印的值亩冬。
那么我們怎么看打包后的項目呢，我們之前介紹過http-server工具，在打包成功后
cd dist
http-server
根據(jù)提示打開瀏覽器硅急，打開控制臺查看就可以
webpack配置的提取
我們在utils.js中編寫公用的cssLoaders方法來處理css覆享，less
function cssLoaders(options){
options = options || {};
const cssLoader = {
loader: 'css-loader', // 轉(zhuǎn)換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', // 開發(fā)環(huán)境熱更新 ，然而不起作用
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相關(guān)的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})
},
測試環(huán)境不需要壓縮css荚板。生產(chǎn)環(huán)境需要對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: "/" // 打包后的資源的訪問路徑前綴
},
這樣的話凤壁，開發(fā)環(huán)境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，這樣開發(fā)環(huán)境css也不會帶hash后綴嘍
這里的文件開發(fā)環(huán)境就不需要去hash后綴名嘍跪另，如果需要的話拧抖，那也需要分區(qū)開發(fā)環(huán)境和打包環(huán)境
編寫build.js打包
我們可以編寫一個js腳本，然后用在node命令執(zhí)行這個腳本免绿，在這個腳本中進行webpack打包唧席。
我們需要利用webpack提供的方法webpack(config,handler)，
該方法的第一個參數(shù)是webpack的配置對象嘲驾，第二個是webpack打包執(zhí)行結(jié)果的回調(diào)
新建build/build.js文件
安裝ora袱吆，chalk
npm install -D ora chalk
ora是用于在shell終端顯示加載中的效果,類似于前端頁面的loading效果
chalk是用于在shell終端輸出帶顏色顏色文本的插件
這兩款插件的具體使用方法請看官網(wǎng)文檔
編寫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()
// 開始構(gòu)建
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"
分別執(zhí)行測試距淫，如下圖：
打包結(jié)果如下圖
源碼請看release0.0.1版本源碼0.0.1
下一篇：多頁面配置 react+webpack4.x搭建前端項目之多頁面配置
