应用场景
静态资源缓存是前端性能优化的一个关键部分,一般我们都会尽可能的多利用浏览器缓存去加载一部分资源,以达到降低网络流量加快页面打开速度的目的。
但是如果我们在版本更新的时候,虽然代码发生变化,但是webpack编译好的文件名没有变化,那么浏览器会自动加载缓存文件,这样就不能达到第一时间更新的效果。
所以要利用webpack的配置,将文件名后加上哈希值,更新的文件哈希值变化,未更新的文件哈希值不变,以区分更新的文件和未更新的文件。
以下是个人在项目中应用的代码:
const webpack = require('webpack'),
path = require('path'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
ExtractTextPlugin = require("extract-text-webpack-plugin"),
CleanWebpackPlugin = require('clean-webpack-plugin'),
autoprefixer = require('autoprefixer'),
es3ifyPlugin = require('es3ify-webpack-plugin'),
ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
const ROOT_PATH = path.resolve(__dirname, ".");
const BUILD_PATH = path.resolve(ROOT_PATH, 'build');
module.exports = {
entry: {
polyfill: 'babel-polyfill',
main: './src/index.jsx'
},
output: {
path: BUILD_PATH,
filename: 'js/[name].[chunkhash:7].js'
},
//如果不需要react这段可以去掉
resolve: {
root: ['./scss'],
extensions: ['', '.js', '.jsx'],
alias: {
"react": "anujs/dist/ReactIE.js",
"react-dom": "anujs/dist/ReactIE.js",
'prop-types': 'anujs/lib/ReactPropTypes',
'devtools': "anujs/lib/devtools",
'create-react-class': 'anujs/lib/createClass'
}
},
module: {
loaders: [{
test: /\.(js|jsx)(\?.*$|$)/,
exclude: /node_modules/,
loader: 'babel-loader?cacheDirectory=true'
},
{
test: /\.(png|jpg|gif|bmp|svg|swf)(\?.*$|$)/,
loader: "url?limit=2048&name=./img/[hash:5].[ext]",
},
{
test: /\.css$/,
// loader: "style!css",
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style", "css?modules=true&sourceMap=true!postcss!sass", {
// publicPath: "./"
})
},
],
postLoaders: [
// {test: /\.(js|jsx)(\?.*$|$)/,loader: "es3ify-loader"},
// {test: /\.(js|jsx)$/,loader: 'export-from-ie8/loader'}
]
},
postcss: function () {
return [autoprefixer];
},
plugins: [
new es3ifyPlugin(),
new ExtractTextPlugin("[name].[contenthash:7].css"),
new HtmlWebpackPlugin({
template: "src/index.html"
}),
new ParallelUglifyPlugin({
cacheDir: '.cache/',
uglifyJS: {
output: {
comments: false
},
warnings: false
}
}),
new CleanWebpackPlugin("build", {
root: ROOT_PATH
})
],
devServer: {
disableHostCheck: true,
historyApiFallback: true,
progress: true,
outputPath: BUILD_PATH,
host: "0.0.0.0",
port: 3000,
hot: true
},
devtool: 'source-map'
}