在webpac-dev-server上运行,我的应用工作正常。
但是使用web pack构建后,从公共文件夹中运行index.html,却无法得到Bundle.js。出现这个错误。
意外的标记'<' bundle.js第1行。
我的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',
}),
],
};
这是我的文件夹树结构
构建后,公共文件夹中的index.html无法使用(无法加载bundle.js)。
但webpack-dev-server运行良好。
你应该在bundle.js之前使用 <script src="/bundle.js"></script>
你的输出看起来很好。除此以外,我发现还有另一个解决方案,你可能想试试。
> added <base href="/" /> into the <head> of my index.html