VanillaJs with Webpack, can't load bundle.js in index.html after build
Question
Running On The webpac-dev-server, My app works fine.
But After building with web pack, run index.html from the public folder and you can't get Bundle.js. With this error,
unexpected token '<' bundle.js line 1
my webpack conf file is
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)
but webpack-dev-server working well.
1 answers
solution1
0 2020-06-10 14:35:14
You should use / before bundle.js <script src="/bundle.js"></script> Your output is looking fine. Other than that there is another solution i find you might want to try.
> added <base href="/" /> into the <head> of my index.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.