我正在使用 webpack2 并将 hot loader3 与 express 反应。我收到一个错误
Uncaught SyntaxError: Unexpected token < in dist/index.html
这是我的配置文件
webpack.config.js
const isDevelopment = process.argv.indexOf('--development') !== -1;
const VENDOR_LIBS = [
'react', 'react-dom', 'redux', 'react-redux',
'react-router', 'react-router-redux', 'lodash',
'express',
];
const entryPath = path.join(__dirname, 'src/index.js');
const config = {
entry: {
bundle: isDevelopment ? [
'webpack-hot-middleware/client?reload=true',
'react-hot-loader/patch',
entryPath
] : entryPath,
vendor: VENDOR_LIBS
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '',
filename: isDevelopment ? '[name].js' : '[name].[chunkhash].js',
},
module: {
rules: [
{
loader: ExtractTextPlugin.extract({
loader: 'css-loader'
}),
test: /\.css$/,
},
{
use: ['babel-loader'],
test: /\.js$/,
exclude: /node_modules/,
},
{
use: [
{
loader: 'url-loader',
options: { limit: 40000 }
},
'image-webpack-loader'
],
test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|otf|ttf)$/,
},
],
},
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new HtmlWebpackPlugin({
inject: true,
template: 'src/index.html',
minify: {
removeComments: false,
collapseWhitespace: false,
}
}),
new ExtractTextPlugin('style.css'),
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
],
};
isDevelopment && config.plugins.push(
new webpack.optimize.UglifyJsPlugin({
output: {
comments: false,
screw_ie8: true
},
})
);
module.exports = config;
服务器.js
const isDevelopment = process.argv.indexOf('--development') !== -1;
if (isDevelopment) {
const webpack = require('webpack');
const webpackConfig = require('./webpack.config');
const compiler = webpack(webpackConfig);
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
hot: true,
stats: {
colors: true
}
}));
app.use(require('webpack-hot-middleware')(compiler));
} else {
app.use(express.static(__dirname + '/src/assets/'));
}
app.get('*', function (request, response) {
response.sendFile(__dirname + '/dist/index.html');
});
app.listen(port);
console.log(`server started on port: ${port}`);
包.json
"scripts": {
"pre-start": "webpack",
"start-dev": "node server.js --development",
"start-prod": "rimraf dist && webpack && node server.js --production"
},
"dependencies": {
"express": "^4.14.0",
"lodash": "^4.17.4",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0",
"reselect": "^2.5.4"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-3": "^6.17.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "2.0.0-beta.4",
"html-webpack-plugin": "^2.26.0",
"image-webpack-loader": "^3.1.0",
"react-hot-loader": "next",
"rimraf": "^2.5.4",
"style-loader": "^0.13.1",
"webpack": "beta",
"webpack-dev-middleware": "^1.9.0",
"webpack-dev-server": "beta",
"webpack-hot-middleware": "^2.15.0"
}
}
这是控制台中显示的错误的屏幕截图
此错误的原因可能是什么？htmlWebpackPlugin 或 extract-text-webpack-plugin 有问题吗？
使用 publicPath 和 manifest.hash.js更新 我的 dist 的 index.html 将是
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pogimon</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="manifest.79b84dc7d02a392424d5.js"></script>
<script type="text/javascript" src="/manifest.6dcd342a4568f6b57de6.js"></script><script type="text/javascript" src="/vendor.a79b5bc95a09216321bd.js"></script><script type="text/javascript" src="/bundle.d03400470aaca7bf8a0d.js"></script></body>
</html>