如何通过webpack将npm模块代码插入到index.html文件中

完全可以通过webpack实现自动插入，以下是两种常用的实现方式：

方案一：搭配插件实现（支持代码编译、适配性强） #

适合需要对npm模块代码做babel兼容、或者需要额外添加自定义逻辑的场景，依赖html-webpack-plugin和html-inline-script-webpack-plugin实现。

1. 安装依赖

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

2. 新增单独的内联脚本入口文件，比如src/inline-lib.js，在文件内引入你需要的npm模块：

// 替换成你要引入的npm包
import targetLib from 'target-npm-package'
// 可按需挂载到全局，或者直接执行模块初始化逻辑
window.targetLib = targetLib

3. 修改webpack配置文件：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin')

module.exports = {
  entry: {
    main: './src/index.js', // 你的原有项目主入口
    inlineLib: './src/inline-lib.js' // 新增的内联脚本入口
  },
  // 其余原有配置保持不变
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // 你的原有html模板路径
      inject: 'head' // 指定脚本注入到head标签内
    }),
    new HtmlInlineScriptPlugin({
      // 仅匹配内联脚本的chunk，实现仅把该部分代码内联到html中
      scriptMatchPattern: [/inlineLib.*\.js$/]
    })
  ]
}

打包后目标npm模块的代码会自动以内联script的形式插入到index.html的head标签中。

方案二：模板直接引入（轻量快捷，无需额外入口配置） #

适合不需要对模块代码做额外编译的场景，仅通过raw-loader读取模块源码直接插入模板。

1. 安装依赖

npm install raw-loader --save-dev

2. 直接在你的html模板的head标签内添加如下代码：

<script>
  <%= require('raw-loader!./node_modules/目标npm包的产物路径').default %>
</script>

示例：如果要内联lodash的最小产物，路径为./node_modules/lodash/lodash.min.js。

注意事项 #

• 仅建议内联体积较小、必须在首屏加载完成前执行的代码，过大的内联脚本会拖慢首屏加载速度
• 如果需要兼容低版本浏览器，优先选择方案一，单独入口的代码会走webpack配置的babel编译规则

内容的提问来源于stack exchange，提问作者howard