webpack - webpack 4 配置,重新加载页面崩溃
问题描述
尝试迁移到 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,
},
};
};
解决方案
Webpack在dist/文件夹中生成main.js文件。您的子页面在admin/文件夹中请求它。打开代表此页面的HTML文件并更改路径。
推荐阅读
- c++ - 为什么基指针可以访问虚函数中的派生成员变量
- sql - 根据最新日期和 SQL Server 2008 R2 中的不同列获取表的最新行
- c# - 在没有静态引用的静态方法中修改另一个类中的类属性
- javascript - 使用第二个 jquery 请求上传文件
- amazon-web-services - 将 robots.txt 文件放入 S3 存储桶
- python - 基于多个键或多个键组合或合并字典
- javascript - Heroku Rails JS管道问题
- java - 连接到 HTML 客户端的 Java 服务器套接字
- javascript - 换行我#each#command
- jquery-waypoints - `this.previous().previous().element == this.element`?