配置插件html-webpack-plugin出现的问题,原因在于
plugins里面htmlplugin少打了一个n.
另外一种情况就是这种情况
const path = require('path')
// 1.导入插件,得到构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2. 创建插件的实例对象
const HtmlPlugin = new HtmlPlugin({
template: './src/index.html',
filename: './index.html',
})
module.exports = {
mode: 'development',
//打包入口文件的路径
entry: path.join(__dirname, './src/index.js'),
output: {
//输出文件的存放路径
path: path.join(__dirname, './dist'),
// 输出文件的名称
filename: 'bundle.js',
},
// 挂载插件的实例对象
plugins: [HtmlPlugin]
}
两者命名一样,然后导致无法识别,解决办法就是两者命名改其中一个,但下面plugins里面的要与上面的实例对象相同。
示例代码如下:
const path = require('path')
// 1.导入插件,得到构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2. 创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
template: './src/index.html',
filename: './index.html',
})
module.exports = {
mode: 'development',
//打包入口文件的路径
entry: path.join(__dirname, './src/index.js'),
output: {
//输出文件的存放路径
path: path.join(__dirname, './dist'),
// 输出文件的名称
filename: 'bundle.js',
},
// 挂载插件的实例对象
plugins: [htmlPlugin]
}