带有 Webpack 的 VanillaJs，构建后无法在 index.html 中加载 bundle.js
[英]VanillaJs with Webpack, can't load bundle.js in index.html after build
问题描述
Running On The webpac-dev-server, My app works fine.
在 webpac-dev-server 上运行，我的应用程序运行良好。
But After building with web pack, run index.html from the public folder and you can't get Bundle.js.但是在使用 web pack 构建之后，从 public 文件夹运行 index.html 并且你无法获得 Bundle.js。 With this error,有了这个错误，
unexpected token '<' bundle.js line 1意外标记“<”bundle.js 第 1 行
my webpack conf file is我的 webpack 配置文件是
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'none',
entry: './src/index.js',
output: {
filename: 'bundle.js',
publicPath: '/',
path: path.join(__dirname, 'public'),
},
devServer: {
port: 3001,
hot: true,
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.m?js$/,
include: path.join(__dirname),
exclude: /(node_modules)|(public)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html',
}),
],
};
and Here is my folder tree structure这是我的文件夹树结构
After build, index.html in public folder not working (can't load bundle.js)构建后，公用文件夹中的 index.html 无法正常工作（无法加载 bundle.js）
but webpack-dev-server working well.但是 webpack-dev-server 运行良好。
1 个解决方案
解决方案1
0 2020-06-10 14:35:14
You should use / before bundle.js <script src="/bundle.js"></script> Your output is looking fine.您应该在 bundle.js <script src="/bundle.js"></script>之前使用 / 您的 output 看起来不错。 Other than that there is another solution i find you might want to try.除此之外，我发现您可能想尝试另一种解决方案。
> added <base href="/" /> into the <head> of my index.html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.