问题描述
这是我对 webpack 和包 json 的设置。我正在为 html 文件使用 2 个入口点。不知何故,HMR 使用 css 和 js 更改重新加载页面,但不会更改 html 内容。我已经尝试了很多来自 stackoverflow 和 github 问题的建议,但没有任何帮助。如有任何帮助,我将不胜感激。
const isDev = process.env.NODE_ENV === "development"
const filename = ext => isDev ? `[name].${ext}` : `[name].[contenthash].${ext}`;
const plugins = [
new HTMLWebpackPlugin({
template: 'index.html',favicon: './favicon.ico',filename: 'index.html',minify: {
collapseWhitespace: !isDev
},chunks: ['main']
}),new HTMLWebpackPlugin({
template: './another.html',filename: 'another.html',minify: {
collapseWhitespace: !isDev
},chunks: ['analytics']
}),new MiniCssExtractPlugin({
filename: filename('css'),}),new CleanWebpackPlugin(),new webpack.HotModuleReplacementPlugin(),]
const cssLoaders = (loader) => {
const loaders = [
{ loader: MiniCssExtractPlugin.loader },'css-loader'
];
if (loader) { loaders.push(loader) }
return loaders
}
module.exports = {
context: path.resolve(__dirname,'src'),mode: 'development',target: process.env.NODE_ENV === "development" ? "web" : "browserslist",entry: {
main: {
import: ['@babel/polyfill','./index.js']
},analytics: ['./analytics.js'],},output: {
filename: filename('js'),path: path.resolve(__dirname,'dist'),chunkFilename: "[name].bundle.js"
},resolve: {
extensions: ['.js','.json','.png'],alias: {
'@assets': path.resolve(__dirname,'src/assets'),'@js': path.resolve(__dirname,"src/js"),'@css': path.resolve(__dirname,"src/css")
}
},devServer: {
historyApiFallback: true,open: true,compress: true,hot: true,port: 5000,inline: true,plugins,devtool: isDev ? 'source-map' : false,optimization: {
splitChunks: {
chunks: 'all'
},runtimeChunk: 'single',minimize: !isDev,minimizer: [
new CssMinimizerPlugin(),new TerserPlugin()
],module: {
rules: [
{
test: /\.m?js$/,exclude: /node_modules/,use: {
loader: 'babel-loader',options: {
presets: ['@babel/preset-env'],plugins: ['@babel/plugin-proposal-class-properties']
}
}
},{
test: /\.css$/,use: cssLoaders()
},{
test: /\.s[ac]ss$/i,use: cssLoaders('sass-loader')
},{
test: /\.(png|jpg|svg|gif)$/,use: [{
loader: 'file-loader',options: {
name: "[name].[ext]"
}
}]
},{
test: /\.(ttf|woff|woff2|eot)$/,use: [
{
loader: 'file-loader',options: {
name: '[name].[ext]'
}
}
]
},]
}
}
and `package.json` scripts
{
"scripts": {
"dev": "cross-env NODE_ENV=development npx webpack --mode development","build": "cross-env NODE_ENV=production npx webpack --mode production","watch": "cross-env NODE_ENV=development npx webpack --mode development --watch","server": "cross-env NODE_ENV=development webpack serve --mode development --open"
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)