在版本更新时，利用webpack防止浏览器缓存

应用场景

静态资源缓存是前端性能优化的一个关键部分，一般我们都会尽可能的多利用浏览器缓存去加载一部分资源，以达到降低网络流量加快页面打开速度的目的。

但是如果我们在版本更新的时候，虽然代码发生变化，但是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'
}

参考：www.jianshu.com/p/b83f4a046…