atool-build协同html-webpack-plugin解决bundle文件cache问题

发表于   |  

问题：

atool-build默认编译出index.js, index.css， 当项目发布新版本，但用户游览器加载的经常还是上个版本的缓存，用户不得不手动去清除缓存。

方案：

引入webpack的插件html-webpack-plugin，应用html模版。

  1. install html-webpack-plugin. 
1
install html-webpack-plugin --save-dev

  1. 更改package.json

    npm run clear: 清除之前版本的js/css文件。

    —hash atool-build的选项，设置了之后webpack将会编译出带hash的js/css文件。

1
"deploy": "npm run clear && atool-build  --hash ",
  1. 更改webpack.config.js,指定该index.ejs为html模版文件
1
2
3
4
5
webpackConfig.plugins.push(
  new HtmlWebpackPlugin({
    template: "./src/entries/index.ejs"
  })
);
  1. index.ejs. 注：在调试过程中发现必须后缀名为.ejs.不然模版不起做用，因时间关系没有深究。
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>我的title</title>
  </head>
  <body>
  <div id="root"></div>
  </body>
</html>
  1. 编译后生成的index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <title>我的title</title>
  <link href="index-cfdc7c9610845019c2f2.css" rel="stylesheet"></head>
  <body>
  <div id="root"></div>
  <script type="text/javascript" src="common-a435e8ead877d7765d7e.js"></script>
  <script type="text/javascript" src="index-cfdc7c9610845019c2f2.js"></script>
  </body>
</html>