首页
前端开发
Webpack
inject-html-webpack-plugin HTML资源注入插件

inject-html-webpack-plugin HTML资源注入插件

0 次浏览 0 条评论
zip
zip

脚本标签和样式链接的手动注入太繁琐？inject-html-webpack-plugin就挺管用的。它是个比较简单粗暴的 Webpack 插件，直接帮你把需要的资源插进 HTML 里，省事不少。哦，安装也就一行命令：npm install inject-html-webpack-plugin --save-dev。

配置也不难，在webpack.config.js里加上这段：

var InjectHtmlPlugin = require('inject-html-webpack-plugin');


module.exports = {
  entry: {
    index: './index.js'
  },
  output: {
    path: './dist'
  },
  plugins: [
    new InjectHtmlPlugin({
      filename: 'index.html',
      links: ['style.css'],
      scripts: ['bundle.js']
    })
  ]
};

这个插件比较适合场景是：你有些资源是打包完才知道的，或者你想精准控制注入顺序，那它就挺合适。默认html-webpack-plugin也能注入，但这个插件思路更直接清晰点。

另外，如果你在用 webpack-dev-server，可以搭配看看 webpack-dev-server-inject-scripts，自动注入脚本的中间件，用起来也还不错。

如果你还要注入环境变量之类的东西，rollup-plugin-inject-process-env 或者 Resource-hints-webpack-plugin 也值得一看，思路有相通的地方。

，如果你觉得 webpack 打包出来的 HTML 还要手动改，那 inject-html-webpack-plugin 可以试试，省心。

zip 文件大小：9.83KB