webpack學習筆記之優化緩存、合并、懶加載

/*生成環境配置文件：不需要一些dev-tools,dev-server和jshint校驗等。和開發有關的東西刪掉*/
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');
//具體作用及缺點見plugins中的描述
//var WebpackMd5Hash = require('webpack-md5-hash');
// 該插件是對“webpack-md5-hash”的改進：在主文件中獲取到各異步模塊的hash值，然后將這些hash值與主文件的代碼內容一同作為計算hash的參數，這樣就能保證主文件的hash值會跟隨異步模塊的修改而修改。
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里面的庫
 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
 //以文件內容的MD5生成Hash名稱的script來防止緩存
 filename: 'js/[name].[chunkhash:8].js',
 //異步加載的模塊是要以文件形式加載，生成的文件名是以chunkFilename配置的
 chunkFilename: 'js/[name].[chunkhash:8].js'
 },
 module:{
 loaders:[{
 test: /\.jsx?$/,
 //這里(node_modules文件夾)再也不需通過任何第三方來加載
 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:圖片、字體圖標加載器，是對file-loader的上層封裝,支持base64編碼。傳入的size（也有的寫limit) 參數是告訴它圖片如果不大于 25KB 的話要自動在它從屬的 css 文件中轉成 BASE64 字符串。
 {
 test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
 loader: 'url?limit=25000&name=[name].[ext]'
 }]
 },
 plugins:[
 //提取公共代碼的插件，用于提取多個入口文件的公共腳本部分，然后生成一個vendors.js。注意HTML代碼中要加載這個公共文件
 new webpack.optimize.CommonsChunkPlugin({
 name: 'vendors',
 filename: 'js/vendors.js'
 }),
 //在文件開頭插入banner
 new webpack.BannerPlugin("The file is creted by yangmin.--"+ new Date()),
 //壓縮js文件
 new webpack.optimize.UglifyJsPlugin({
 compress: {
 warnings: false
 }
 }),
 /*插件：單獨使用style標簽加載css文件.contenthash代表的是文本文件內容的hash值，也就是只有style文件的hash值*/
 new ExtractTextPlugin("css/[name].[contenthash:8].css"),//設置其路徑(路徑相對于path)
 /*插件：動態生成html，在webpack完成前端資源打包以后，自動將打包后的資源路徑和版本號寫入HTML中，達到自動化的效果。*/
 new HtmlWebpackPlugin({
 filename:'view/index.html', //生成的html存放路徑，相對于 path
 template:'src/view/index.html', //html模板路徑
 inject:true, //允許插件修改哪些內容，true/'head'/'body'/false,
 chunks:['vendors','app'],//加載指定模塊中的文件，否則頁面會加載所有文件
 hash:false, //為靜態資源生成hash值
 minify:{ //壓縮HTML文件
 removeComments:false, //移除HTML中的注釋
 collapseWhitespace:false //刪除空白符與換行符
 } 
 }),
 new HtmlWebpackPlugin({
 filename:'view/mobile.html', //生成的html存放路徑，相對于 path
 template:'src/view/mobile.html', //html模板路徑
 inject:true, //允許插件修改哪些內容，true/'head'/'body'/false,
 chunks:['vendors','mobile'],//加載指定模塊中的文件，否則頁面會加載所欲文件
 hash:false, //為靜態資源生成hash值
 minify:{ //壓縮HTML文件
 removeComments:false, //移除HTML中的注釋
 collapseWhitespace:false //刪除空白符與換行符
 }
 }),
 /*作用：生成具有獨立hash值的css和js文件，即css和js文件hash值解耦.
 *缺點：webpack-md5-hash插件對chunk-hash鉤子進行捕獲并重新計算chunkhash，它的計算方法是只計算模塊本身的當前內容（包括同步模塊）。這種計算方式把異步模塊的內容忽略掉了，會造成一個問題：異步模塊的修改并未影響主文件的hash值。
 */
 //new WebpackMd5Hash()
 new WebpackSplitHash()
 ]
}
 module.exports = config;

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:[] 
 } 
}
/*當加載多個壓縮文件時，下述方法更優雅簡便*/
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;

<script src="../dist/vendors.js"></script>
<script src="../dist/app.js"></script>

import 'main.css'; 
alert('I am main.js');

npm install extract-text-webpack-plugin --save-dev

//webpack.production.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');

//webpack.production.config.js
new ExtractTextPlugin("css/[name].[contenthash:8].css"),//設置其路徑(路徑相對于path)

//webpack.production.config.js

var WebpackMd5Hash = require('webpack-md5-hash');
...
new WebpackMd5Hash();

//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";

output:{
 path:path.resolve(__dirname, 'dist'),
 publicPath:'../',//生成的html里的引用路徑用 publicPath
 filename: 'js/[name].[hash:8].js',
 //異步加載的模塊是要以文件形式加載，生成的文件名是以chunkFilename配置的
 chunkFilename: 'js/[name].[chunkhash:8].js'
},

//webpack.production.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
...
var config = {
...
plugins:[
... 
 new HtmlWebpackPlugin({
 filename:'view/index.html', //生成的html存放路徑，相對于 path
 template:'src/view/index.html', //html模板路徑
 inject:true, //允許插件修改哪些內容，true/'head'/'body'/false,
 chunks:['vendors','app'],//加載指定模塊中的文件，否則頁面會加載所有文件
 hash:false, //為靜態資源生成hash值
 minify:{ //壓縮HTML文件
 removeComments:false, //移除HTML中的注釋
 collapseWhitespace:false //刪除空白符與換行符
 } 
 }),
 new HtmlWebpackPlugin({
 filename:'view/mobile.html', //生成的html存放路徑，相對于 path
 template:'src/view/mobile.html', //html模板路徑
 inject:true, //允許插件修改哪些內容，true/'head'/'body'/false,
 chunks:['vendors','mobile'],//加載指定模塊中的文件，否則頁面會加載所有文件
 hash:false, //為靜態資源生成hash值
 minify:{ //壓縮HTML文件
 removeComments:false, //移除HTML中的注釋
 collapseWhitespace:false //刪除空白符與換行符
 } 
 })
]}