首页
前端开发
Webpack
html-webpack-plugin使用详解

html-webpack-plugin使用详解

0 次浏览 0 条评论
pdf
pdf

自动注入 JS 和 CSS、支持模板语法、还能加 hash 的文件名——html-webpack-plugin可以说是前端构建流程里一个挺省心的插件了。

html-webpack-plugin的作用直接：帮你生成最终输出的index.html，自动把 webpack 打包出来的bundle.js插进页面。是文件名加了hash的情况，每次打包都变，这插件能让你不用手动改 html，省得出错。

安装也简单，用npm install html-webpack-plugin --save-dev就行。配合webpack.config.js里的配置项，比如：

const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: '我的页面',
      template: './src/index.html',
      inject: 'body'
    })
  ]
};

上面这段里，template是指定你自己的 HTML 模板，inject表示把脚本插在哪儿——一般都选body。，你也可以用lodash语法来动态生成更复杂的模板，灵活性还挺高的。

如果你在用 Vue，还可以搭配预渲染用得更溜。像这篇《Vue 预渲染与 html-webpack-plugin 结合实践》讲得就蛮细。

另外，如果你觉得默认的inject方式不够用，也可以看看这个injectjscss-template-html-webpack-plugin，专门用来替代默认插入逻辑，适合更复杂的场景。

，如果你还在手动写script标签，强烈建议你用一下html-webpack-plugin，体验一下自动注入带来的丝滑感。

pdf 文件大小：64.11KB