尝试构建以下Webpack文件时,标题出现错误:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
module.exports = {
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run post css actions
options: {
plugins: function() { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html',
inlineSource: '.(js|css)$'
}),
new HtmlWebpackInlineSourcePlugin()
],
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
mode: 'development'
};
知道为什么吗?
FWIW我正在使用纱线工作区。
HtmlWebpackInlineSourcePlugin
是在编译期间调用的getHooks
方法HtmlWebpackPlugin
此方法仅在的版本4和更高HtmlWebpackPlugin
版本中可用。
这就是为什么文档建议使用此版本及更高版本的原因。
您可以通过安装html-webpack-plugin @ next获得此版本。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句