進(jìn)一步添加配置咖驮，優(yōu)化合并文件，加快編譯速度。下面是生產(chǎn)環(huán)境配置文件webpack.production.js托修，與wenbpack.config.js相比其不需要一些dev-tools,dev-server和jshint校驗(yàn)等忘巧，將與開(kāi)發(fā)相關(guān)的東西刪掉。下面的介紹均以此代碼配置作參考睦刃。
/*生成環(huán)境配置文件：不需要一些dev-tools,dev-server和jshint校驗(yàn)等袋坑。和開(kāi)發(fā)有關(guān)的東西刪掉*/
var webpack = require('webpack');
var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
var pathToReactDOM = path.resolve(node_modules, 'react-dom/dist/react-dom.min.js');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
//具體作用及缺點(diǎn)見(jiàn)plugins中的描述
//var WebpackMd5Hash = require('webpack-md5-hash');
// 該插件是對(duì)“webpack-md5-hash”的改進(jìn)：在主文件中獲取到各異步模塊的hash值，然后將這些hash值與主文件的代碼內(nèi)容一同作為計(jì)算hash的參數(shù)眯勾，這樣就能保證主文件的hash值會(huì)跟隨異步模塊的修改而修改枣宫。
var WebpackSplitHash = require('webpack-split-hash');
var config = {
entry:{
app:path.resolve(__dirname, 'src/js/entry.js'),
mobile: path.resolve(__dirname, 'src/js/mobile.js'),
//添加要打包在vendors.js里面的庫(kù)
vendors:['react','react-dom']
},
resolve:{
alias: {
'react.js': pathToReact, //alias:別名,
'react-dom.js': pathToReactDOM
},
fallback: path.join(__dirname, "node_modules")
},
resolveLoader: {
fallback: path.join(__dirname, "node_modules")
},
output:{
path:path.resolve(__dirname, 'dist'),
publicPath:'../',//生成的html里的引用路徑用 publicPath
//以文件內(nèi)容的MD5生成Hash名稱的script來(lái)防止緩存
filename: 'js/[name].[chunkhash:8].js',
//異步加載的模塊是要以文件形式加載，生成的文件名是以chunkFilename配置的
chunkFilename: 'js/[name].[chunkhash:8].js'
},
module:{
loaders:[{
test: /\.jsx?$/,
//這里(node_modules文件夾)再也不需通過(guò)任何第三方來(lái)加載
exclude:path.resolve(__dirname, 'node_modules'),
loader: 'babel',
query:{
presets:['es2015', 'react']
}
},
{
test:/\.css$/,
//loader:'style!css'
loader: ExtractTextPlugin.extract("style", "css")
},
{
test:/\.scss$/,
loader:'style!css!sass'
},
//url-loader:圖片吃环、字體圖標(biāo)加載器也颤，是對(duì)file-loader的上層封裝,支持base64編碼。傳入的size（也有的寫limit) 參數(shù)是告訴它圖片如果不大于 25KB 的話要自動(dòng)在它從屬的 css 文件中轉(zhuǎn)成 BASE64 字符串郁轻。
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'url?limit=25000&name=[name].[ext]'
}]
},
plugins:[
//提取公共代碼的插件翅娶，用于提取多個(gè)入口文件的公共腳本部分，然后生成一個(gè)vendors.js好唯。注意HTML代碼中要加載這個(gè)公共文件
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
filename: 'js/vendors.js'
}),
//在文件開(kāi)頭插入banner
new webpack.BannerPlugin("The file is creted by yangmin.--"+ new Date()),
//壓縮js文件
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
/*插件：?jiǎn)为?dú)使用style標(biāo)簽加載css文件.contenthash代表的是文本文件內(nèi)容的hash值竭沫，也就是只有style文件的hash值*/
new ExtractTextPlugin("css/[name].[contenthash:8].css"),//設(shè)置其路徑(路徑相對(duì)于path)
/*插件：動(dòng)態(tài)生成html，在webpack完成前端資源打包以后骑篙，自動(dòng)將打包后的資源路徑和版本號(hào)寫入HTML中蜕提，達(dá)到自動(dòng)化的效果。*/
new HtmlWebpackPlugin({
filename:'view/index.html', //生成的html存放路徑靶端，相對(duì)于 path
template:'src/view/index.html', //html模板路徑
inject:true, //允許插件修改哪些內(nèi)容谎势，true/'head'/'body'/false,
chunks:['vendors','app'],//加載指定模塊中的文件，否則頁(yè)面會(huì)加載所有文件
hash:false, //為靜態(tài)資源生成hash值
minify:{ //壓縮HTML文件
removeComments:false, //移除HTML中的注釋
collapseWhitespace:false //刪除空白符與換行符
}
}),
new HtmlWebpackPlugin({
filename:'view/mobile.html', //生成的html存放路徑杨名，相對(duì)于 path
template:'src/view/mobile.html', //html模板路徑
inject:true, //允許插件修改哪些內(nèi)容脏榆，true/'head'/'body'/false,
chunks:['vendors','mobile'],//加載指定模塊中的文件，否則頁(yè)面會(huì)加載所欲文件
hash:false, //為靜態(tài)資源生成hash值
minify:{ //壓縮HTML文件
removeComments:false, //移除HTML中的注釋
collapseWhitespace:false //刪除空白符與換行符
}
}),
/*作用：生成具有獨(dú)立hash值的css和js文件台谍，即css和js文件hash值解耦.
*缺點(diǎn)：webpack-md5-hash插件對(duì)chunk-hash鉤子進(jìn)行捕獲并重新計(jì)算chunkhash须喂，它的計(jì)算方法是只計(jì)算模塊本身的當(dāng)前內(nèi)容（包括同步模塊）。這種計(jì)算方式把異步模塊的內(nèi)容忽略掉了趁蕊，會(huì)造成一個(gè)問(wèn)題：異步模塊的修改并未影響主文件的hash值坞生。
*/
//new WebpackMd5Hash()
new WebpackSplitHash()
]
}
module.exports = config;
一、在開(kāi)發(fā)環(huán)境中使用壓縮文件
例如ReactJS項(xiàng)目中為了不讓 Webpack 去遍歷 React JS 及其所有依賴介衔，你可以在webpack.config.js中重寫它的行為恨胚。
config.alias: 每當(dāng) "react" 在代碼中被引入，它會(huì)使用壓縮后的 React JS 文件炎咖。
noParse: 阻止Webpack 去解析那個(gè)壓縮后的文件赃泡。
當(dāng)加載多個(gè)壓縮文件時(shí)寒波，下述方法更優(yōu)雅簡(jiǎn)便,webpack.production.js:
var webpack = require("webpack");
...
var HtmlWebpackPlugin = require('html-webpack-plugin');
var deps = [
'react/dist/react.min.js',
'react-dom/dist/react-dom.min.js'
];
var config = {
...
resolve:{
alias:{},
fallback:path.join(__dirname, "node_modules")
},
...
module:{
...
noParse:[]
}
}
/*當(dāng)加載多個(gè)壓縮文件時(shí)，下述方法更優(yōu)雅簡(jiǎn)便*/
deps.forEach(function(dep){
var depPath = path.resolve(node_modules, dep);
//path.dep是路徑分隔符升熊。
config.resolve.alias[dep.split(path.dep)[0]] = depPath;
config.module.noParse.push(depPath);
});
module.exports = config;
二俄烁、分離應(yīng)用和第三方文件
當(dāng)你的應(yīng)用依賴其他庫(kù)尤其是像 React JS 這種大型庫(kù)的時(shí)候，需要考慮把這些依賴分離出去级野，這樣就能夠讓用戶在你更新應(yīng)用之后不需要再次下載第三方文件页屠。上述配置文件中的entry里添加了第三方包vendors，其值為要分離打包的文件蓖柔。運(yùn)行配置后會(huì)在dist/js下生成三個(gè)獨(dú)立文件：app.js辰企、mobile.js、vendors.js况鸣。注意在頁(yè)面中藥引入vendors.js
<script src="../dist/vendors.js"></script>
<script src="../dist/app.js"></script>
三牢贸、多重入口
當(dāng)應(yīng)用有多個(gè)頁(yè)面， 頁(yè)面之間雖然有共享代碼镐捧，但是不想在頁(yè)面中加載所有代碼時(shí)可以定義多重入口潜索。例如配置文件中的app.js針對(duì)pc端頁(yè)面，mobile.js僅針對(duì)移動(dòng)端頁(yè)面懂酱，output的filename：'js/[name].[chunkhash:8].js',采用了文件名變量竹习，這樣在dist/js中可生成與源文件同名的文件。
四列牺、優(yōu)化緩存及懶加載
在生產(chǎn)環(huán)境中整陌，將輸出文件名添加hash值，目的是在文件更改時(shí)強(qiáng)制客戶端重新加載這個(gè)文件昔园，而未改變的文件繼續(xù)使用緩存文件蔓榄。常用的有hash和chunkhash并炮，二者的區(qū)別請(qǐng)參考hash與chunkhash默刚。配置文件中的[chunkhash:8]即截取8位chunkhash值。
webpack****的編譯理念：webpack將style視為js的一部分逃魄，所以在計(jì)算chunkhash時(shí)荤西，會(huì)把所有的js代碼和style代碼混合在一起計(jì)算。比如entry.js引用了main.css：
import 'main.css';
alert('I am main.js');
webpack計(jì)算chunkhash時(shí)伍俘，以entry.js文件為編譯入口邪锌，整個(gè)chunk的內(nèi)容會(huì)將main.css的內(nèi)容也計(jì)算在內(nèi)。所以癌瘾，不論是修改了js代碼還是css代碼觅丰，整個(gè)chunk的內(nèi)容都改變了，計(jì)算所得的chunkhash隨之改變妨退。但理想情況下是想css或js內(nèi)容改變時(shí)僅影響自身文件的chunkhash妇萄，這樣客戶端只需更新一部分文件蜕企。解決此問(wèn)題首先要將css單獨(dú)編譯輸出文件，因?yàn)檎Ｇ闆r下webpack會(huì)把js文件中引入的css文件編譯輸出到html頁(yè)面的<style></style>標(biāo)簽中冠句。
1.使用extract-text-webpack-plugin單獨(dú)編譯輸出css文件
安裝extract-text-webpack-plugin轻掩，
npm install extract-text-webpack-plugin --save-dev
然后在配置文件中引入插件，
//webpack.production.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');
該插件除了chunkhash還提供了另外一種hash值contenthash懦底。顧名思義唇牧，contenthash代表的是文本文件內(nèi)容的hash值，也就是只有style文件的hash值聚唐。此hash是可解決上述問(wèn)題的關(guān)鍵所在丐重。上述配置文件使用了contenthash：
//webpack.production.config.js
new ExtractTextPlugin("css/[name].[contenthash:8].css"),//設(shè)置其路徑(路徑相對(duì)于path)
2.使用使用webpack-md5-hash解耦css和js文件hash值
再考慮以下情況，只修改了main.css文件杆查，未修改entry.js文件弥臼，編譯輸出的js文件hash是否改變？答案是改變了根灯，因?yàn)樯衔奶岬降膚ebpack的編譯理念径缅，webpack將style視為js的一部分，所以在計(jì)算chunkhash時(shí)烙肺，會(huì)把所有的js代碼和style代碼混合在一起計(jì)算纳猪。解決辦法是使用webpack-md5-hash插件：
//webpack.production.config.js
var WebpackMd5Hash = require('webpack-md5-hash');
...
new WebpackMd5Hash();
它的作用是生成具有獨(dú)立hash值的css和js文件，即css和js文件hash值解耦桃笙。webpack-md5-hash插件對(duì)chunk-hash鉤子進(jìn)行捕獲并重新計(jì)算chunkhash氏堤，它的計(jì)算方法是只計(jì)算模塊本身的當(dāng)前內(nèi)容（包括同步模塊）。
3.主文件使用hash代替chunkhash解決異步加載模塊改變時(shí)主文件hash不改變
假如文件中引入了異步模塊搏明，異步模塊修改后會(huì)影響編譯輸出的js文件的chunkhash嗎鼠锈？現(xiàn)在入口文件中引入異步模塊a.js，a.js文件又異步引入b.js星著，b.js同步引入c模塊
//entry.js
'use strict';
import './saveCarInfo.js';
window.onload = function(){//懶加載
require.ensure(['./a.js'],function(require){
var moduleA = require('./a.js');
},'a');
};
//a.js
'use strict'
console.log("a");
setTimeout(function(){
require.ensure([],function(require){
require('./b.js');
},'b');
},10000);
module.exports = "moduleA";
//b.js
import fn_c from './c.js';
console.log('b');
module.exports = 'moduleB';
//c.js
console.log("c");
module.exports = "moduleC";
運(yùn)行npm run deploy,編譯輸出如下,我們看到除了入口文件购笆、css文件、html文件被輸出外虚循，異步加載的模塊a.js同欠、b.js也被當(dāng)做獨(dú)立模塊輸出。
此時(shí)修改a.js文件中的代碼横缔，經(jīng)編譯后铺遂，a.[chunkhash].js的chunkhash會(huì)改變，而生成的主文件app.[chunkhash].js的chunkhash值并沒(méi)有改變茎刚。原因是webpack-md5-hash的這種計(jì)算方式把異步模塊的內(nèi)容忽略掉了襟锐，這會(huì)造成一個(gè)問(wèn)題：異步模塊的修改并未影響主文件的chunkhash值。解決辦法是將輸出的主文件采用[hash]膛锭，而非[chunkhash]
output:{
path:path.resolve(__dirname, 'dist'),
publicPath:'../',//生成的html里的引用路徑用 publicPath
filename: 'js/[name].[hash:8].js',
//異步加載的模塊是要以文件形式加載粮坞，生成的文件名是以chunkFilename配置的
chunkFilename: 'js/[name].[chunkhash:8].js'
},
這種做法也存在缺陷笛质，如果項(xiàng)目中存在不止一個(gè)主js文件，修改任意js代碼會(huì)影響所有最終主文件的[hash]值捞蚂。例如上面的項(xiàng)目配置中會(huì)生成兩個(gè)帶[hash]的主文件：app.[hash].js, mobile.[hash].js妇押。無(wú)論是修改entry.js代碼還是異步模塊a.js，或b.js的代碼姓迅，app.[hash].js和mobile.[hash].js的[hash]都會(huì)改變敲霍。
補(bǔ)充：npm提供了webpack-split-hash插件代替webpack-md5-hash，該插件可以獲取到各異步模塊的hash值丁存，然后將這些hash值與主文件的代碼內(nèi)容一同作為計(jì)算hash的參數(shù)肩杈，這樣就能保證主文件的hash值會(huì)跟隨異步模塊的修改而修改。但我驗(yàn)證后沒(méi)有實(shí)現(xiàn)解寝。扩然。。
4.使用html-webpack-plugin動(dòng)態(tài)生成html
配置文件中的輸出文件都帶了[chunkhash]作為版本號(hào)聋伦，在style或js文件改變時(shí)夫偶，其值都會(huì)隨之改變。利用html-webpack-plugin在webpack完成前端資源打包以后觉增，自動(dòng)將打包后的資源路徑和版本號(hào)寫入HTML中兵拢，達(dá)到自動(dòng)化的效果。
//webpack.production.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
...
var config = {
...
plugins:[
...
new HtmlWebpackPlugin({
filename:'view/index.html', //生成的html存放路徑逾礁，相對(duì)于 path
template:'src/view/index.html', //html模板路徑
inject:true, //允許插件修改哪些內(nèi)容说铃，true/'head'/'body'/false,
chunks:['vendors','app'],//加載指定模塊中的文件，否則頁(yè)面會(huì)加載所有文件
hash:false, //為靜態(tài)資源生成hash值
minify:{ //壓縮HTML文件
removeComments:false, //移除HTML中的注釋
collapseWhitespace:false //刪除空白符與換行符
}
}),
new HtmlWebpackPlugin({
filename:'view/mobile.html', //生成的html存放路徑嘹履，相對(duì)于 path
template:'src/view/mobile.html', //html模板路徑
inject:true, //允許插件修改哪些內(nèi)容腻扇，true/'head'/'body'/false,
chunks:['vendors','mobile'],//加載指定模塊中的文件，否則頁(yè)面會(huì)加載所有文件
hash:false, //為靜態(tài)資源生成hash值
minify:{ //壓縮HTML文件
removeComments:false, //移除HTML中的注釋
collapseWhitespace:false //刪除空白符與換行符
}
})
]}
