Webpack 4 配置，重新加载页面崩溃

Question

尝试迁移到 webpack 4(从 3(。 我尝试过使用非常基本的配置，它在运行时工作正常webpack-dev-server --mode development但是当我进入管理员子页面(localhost：3000/admin/test(并重新加载页面时，它崩溃了。它想在/admin/main.js 中找到 main.js 文件，但它位于/main.js 中。

收到以下错误：Refused to execute script from 'http://localhost:3000/admin/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

知道吗？

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production'
module.exports = (env) => {
return {
entry: { main: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.html$/,
use: [
{
loader: "html-loader",
options: {minimize: true}
}
]
},
{
test: /.(scss|css)$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader'
],
},
{
test: /.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: "[path][name].[hash].[ext]",
}
}
]
}]
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
}),
],
devtool: devMode ? 'cheap-module-eval-source-map' : 'source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
},
};
};

Answer 1

Webpack 在dist/文件夹中生成main.js文件。您的子页面在管理员/文件夹中请求它。打开表示此页面的HTML文件并更改路径。

Answer 2

我在我的HtmlWebPackPlugin中添加了inject: false：

new HtmlWebPackPlugin({
inject: false,
template: "./public/index.html",
filename: "./index.html"
}),

并将main.js包含在索引.html文件中：