小昱个人博客
欢迎来到小昱的世界

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏
webpack缓存及manifest的使用
  • 首页 > 前端 > 自动构建
  • 作者:小昱
  • 2017年6月23日 10:52 星期五
  • 浏览:220
  • 字号:
  • 评论:0
  • webpack.config.js

    var path = require("path");
    var webpack = require("webpack");
    var ChunkManifestPlugin = require("chunk-manifest-webpack-plugin");
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      entry: {
        main: "./index.js" // application code
      },
      output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].[chunkhash:5].js",
        chunkFilename: "[name].[chunkhash:5].js"
      },
      plugins: [
        // 提取公共代码
        new webpack.optimize.CommonsChunkPlugin({
          name: ["vendor", "manifest"], // vendor libs + extracted manifest
          minChunks: Infinity,
        }),
        // 自动成成html,会自动添加对应的js
        new HtmlWebpackPlugin({
            title: 'demo',
            template: 'index.html' // 模板路径
        }),
        // 生成manifest.json文件
        new ChunkManifestPlugin({
          filename: "manifest.json",
          manifestVariable: "webpackManifest",
          inlineManifest: true
        })
      ]
    };

    index.js

    var $ = require('jquery');
    $(function(){
      $("#box").html("Hello world!")
    })

    生成index.html

    通过以上对webpack配置文件的一系列修改,我们成功实现了webpack的独立打包与缓存处理,但是还差最后一步。

    因为我们最终打包后生成的文件名中带有hash值,每次都是会变的,所以我们不能像目前这样在index.html中写死路径。

    index.html

    ...
    <body>
        <script src="./dist/main.js"></script>
        <script src="./dist/vendor.js"></script>
        <script src="./dist/manifest.js"></script>
    </body>
    ...

    以上写法是不对的,因为缺少了可变的hash值,因此我们希望每次打包后index.html中的路径也会自动加上hash值,解决方法为使用html-webpack-plugin插件,如下:

    var HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
        ...
            plugins:[
                ...
                new HtmlWebpackPlugin({
                    title: 'demo',
                    template: 'index.html' // 模板路径
                }),
                ...
            ]
        ...
    }

    上方我们引入了html-webpack-plugin这一个插件,该插件可以帮助我们根据模板生成html文件。在plugins设置中,title配置了生成html中的title部分,template为模板html的路径地址。

    我们需要下载html-webpack-plugin:

    npm install html-webpack-plugin --save-dev

    对应的,index.html只需要写为如下形式即可,不需要添加任何js引用

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
    <div id="box"></div>
    </body>
    </html>

    安装和配置完毕后,运行打包命令:webpack

    Hash: 0c4b91e206579b31544d
    Version: webpack 2.3.2
    Time: 856ms
                Asset       Size  Chunks                    Chunk Names
      vendor.e1868.js     268 kB       0  [emitted]  [big]  vendor
        main.44412.js  337 bytes       1  [emitted]         main
    manifest.ed186.js    5.81 kB       2  [emitted]         manifest
           index.html  292 bytes          [emitted]
       [0] ./~/jquery/dist/jquery.js 267 kB {0} [built]
       [1] ./app/hello.js 50 bytes {1} [built]
       [2] ./app/index.js 114 bytes {1} [built]
       [3] multi jquery 28 bytes {0} [built]

    我们发现在dist目录下生成了一个index.html文件,打开该文件后代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
    <script type="text/javascript" src="manifest.ed186.js"></script>
    <script type="text/javascript" src="vendor.e1868.js"></script>
    <script type="text/javascript" src="main.44412.js"></script>
    </body>
    </html>

    至此我们实现了每次打包后index.html中的路径也会自动加上hash值的功能,因此dist目录下的index.html即为以后的首页文件,最后我们在浏览器中打开该文件成功显示:




    参考资料

    webpack独立打包与缓存处理

    webpack入门必知必会

    https://doc.webpack-china.org/guides/caching




      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: webpack缓存及manifest的使用
    本文地址:http://www.xiaoyulive.top/?post=97
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

    Copyright © 2016-2017 小昱个人博客 滇ICP备16006294号