扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍webpack如何实现缓存优化、合并、懒加载，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联专业为企业提供库伦网站建设、库伦做网站、库伦网站设计、库伦网站制作等企业网站建设、网页设计与制作、库伦企业网站模板建站服务，10多年库伦做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
除了的webpack基本配置，还可以进一步添加配置，优化合并文件，加快编译速度。下面是生产环境配置文件webpack.production.js，与wenbpack.config.js相比其不需要一些dev-tools,dev-server和jshint校验等，将与开发相关的东西删掉。
/*生成环境配置文件：不需要一些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;一、在开发环境中使用压缩文件
例如ReactJS项目中为了不让 Webpack 去遍历 React JS 及其所有依赖，你可以在webpack.config.js中重写它的行为。
config.alias: 每当 "react" 在代码中被引入，它会使用压缩后的 React JS 文件。
noParse: 阻止Webpack 去解析那个压缩后的文件。
当加载多个压缩文件时，下述方法更优雅简便,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:[]
}
}
/*当加载多个压缩文件时，下述方法更优雅简便*/
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;二、分离应用和第三方文件
当你的应用依赖其他库尤其是像 React JS 这种大型库的时候，需要考虑把这些依赖分离出去，这样就能够让用户在你更新应用之后不需要再次下载第三方文件。上述配置文件中的entry里添加了第三方包vendors，其值为要分离打包的文件。运行配置后会在dist/js下生成三个独立文件：app.js、mobile.js、vendors.js。注意在页面中药引入vendors.js