webpack的html模板是.html文件报错，改成.ejs后缀就好了，为什么？

Question

package.json

  "scripts": {    "start": "webpack-dev-server --config webpack.dev.js"  },  "devDependencies": {    "file-loader": "^6.2.0",    "html-webpack-plugin": "^3.2.0",    "webpack": "^4.47.0",    "webpack-cli": "^3.3.10",    "webpack-dev-server": "^3.10.1"  },

webpack.dev.js

  plugins: [    new HtmlWebpackPlugin({      filename: 'index.html',      template: path.resolve(__dirname, './public/template.html'),    })  ]

模板文件是.html时，跑起来报错，把后缀名改成.ejs就好了，为什么？

Answer 1

这个问题涉及到Webpack的配置和模板引擎的处理。

首先，Webpack的HtmlWebpackPlugin插件默认使用html-loader来处理HTML文件。html-loader可以将HTML文件中的require或import语句嵌入到输出的HTML文件中。默认情况下，html-loader会尝试解析和内联所有.js、.css、.png、.gif和.jpg文件。

然而，对于非HTML文件，例如.ejs文件，html-loader可能无法正确处理。因此，当你的模板文件是.html时，可能会出现解析错误。

另一方面，当你将模板文件的后缀改为.ejs时，Webpack可能使用了另一种加载器来处理这个文件，例如ejs-loader（如果你已经在项目中安装了它）。Ejs-loader是用于处理EJS模板的加载器，它能够正确解析和内联EJS文件中的内容。

因此，如果你想继续使用.html作为模板文件的扩展名，你可以尝试在webpack配置中明确指定使用html-loader来处理HTML文件。例如：

plugins: [  new HtmlWebpackPlugin({    filename: 'index.html',    template: path.resolve(__dirname, './public/template.html'),    loader: 'html-loader' // 明确指定使用html-loader  })]

另外，请确保你的项目中已经安装了html-loader。如果没有，你可以通过运行以下命令来安装它：

npm install --save-dev html-loader

希望这可以帮助你解决问题！如果你还有其他问题，请随时提问。