zoukankan      html  css  js  c++  java
  • [Webpack 2] Hashing with Webpack for long term caching

    Leveraging the browser cache is an important part of page load performance. A great way to utilize this cache is by versioning your resources. In this lesson, learn how to use Webpack’s hashing feature so you can take advantage of long term caching of your assets.

    Install: 

    npm install -D html-webpack-plugin

    Webpack.config.js

    const {resolve} = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const isTest = process.env.NODE_ENV === "test";
    module.exports = env => {
      return {
        entry: './js/app.js',
        output: {
          filename: 'bundle.[chunkhash].js',
          path: resolve(__dirname, 'dist'),
          pathinfo: true,
        },
        context: resolve(__dirname, 'src'),
        devtool: env.prod ? 'source-map' : 'eval',
        module: {
          loaders: [
            {test: /.js$/, loader: 'babel!eslint', exclude: /node_modules/},
            {test: /.css$/, loader: 'style!css'},
          ],
        },
        plugins:[
          new HtmlWebpackPlugin(
                {
                  template: './index.html'
                }
            )
        ]
      }
    }

    Remove bundle.js in index.html

    Then in the browser you can see the bundle file has hash name. So everytime, you change the source code, it will update automatically

  • 相关阅读:
    leetcode Remove Linked List Elements
    leetcode Word Pattern
    leetcode Isomorphic Strings
    leetcode Valid Parentheses
    leetcode Remove Nth Node From End of List
    leetcode Contains Duplicate II
    leetcode Rectangle Area
    leetcode Length of Last Word
    leetcode Valid Sudoku
    leetcode Reverse Bits
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5608706.html
Copyright © 2011-2022 走看看