请问如何在main.js中获取HtmlWebpackPlugin的变量呢

Question

// webpack config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: 'abc'
    }),
  ],
}

// main.js
如何在main.js里面获取上面的title?

Answer 1

一般建议用 definePlugin 来处理，不过记得要用 JSON.stringify 转码。

Answer 2

不清楚你说的main.js是什么
如果是指要打包的js文件，那么答案是不能
不同环境下面的东西
webpack.config.js是webpack要执行的代码
main.js是webpack要处理的代码

如果要实现你的目的
只能是使用像DefinePlugin之类进行预处理。

Answer 3

// config.js
module.exports = {
  title: 'abc'
}

你可以把这个变量提取到单独的一个js文件独立维护，main.js跟webpack.config.js各自require|import进来就行

Answer 4

提供一个思路，你可以试下

// webpack config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: 'abc'
    }),
  ],
}

// main.js
如何在main.js里面获取上面的title?

index.html

<% if(htmlWebpackPlugin.options.title) { %>

  <script>
    window.title=<%= htmlWebpackPlugin.options.title %>;
  </script>

<% } %>`