我不确定为什么我的前端不能在热模式下运行。我试图尽可能地分离前端和后端。连接这两者的唯一方法是我使用django的webpack_loader
应用加载webpack
版本以加载到模板(index.html
)。
我的后端位于Django中,目前正在http://127.0.0.1:8000/
上运行。
我的前端托管于localhost:8080
我的热模式devServer在0.0.0.0:8080
我尝试改变我的前端并保存它以查看会发生什么,并且前端的任何内容都没有更新。在我的开发人员工具中,我看到了:
[HMR] Update check failed: SyntaxError: Unexpected token <
at Object.parse (native)
at XMLHttpRequest.request.onreadystatechange (http://localhost:8000/static/js/main.js:44:33)
以下是我的npm脚本:
"scripts": {
"watch-client": "node ./node_modules/webpack/bin/webpack.js --verbose --colors --display-error-details --config webpack.watch.js && node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.watch.js",
"watch": "npm run watch-client"
},
webpack.config.js:
var path = require('path')
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: [
'./app/index.js'
],
output: {
path: path.resolve(__dirname, 'public'),
publicPath: '/js/',
filename: 'main.js'
},
devtool: 'eval',
debug: true,
module: {
loaders: [
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.jsx$/, loader: 'jsx-loader' },
{ test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
{ test: /\.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
{ test: /\.css$/, exclude: /node_modules/, loader: 'style-loader!css-loader' }
]
},
plugins: [
new ExtractTextPlugin('style.css', {
allChunks: true
}),
new webpack.optimize.CommonsChunkPlugin('common.js'),
]
};
webpack.watch.js:
var Webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var config = require("./webpack.config.js");
var BundleTracker = require('webpack-bundle-tracker');
var port = process.env.WEBPACK_PORT || 8080;
var host = process.env.HOST || 'localhost';
// add hot loader
config.entry.unshift(
"webpack-dev-server/client?http://" + host + ":" + port,
"webpack/hot/only-dev-server" // only prevents reload on syntax errors
);
config.plugins = [
new ExtractTextPlugin("style.css", {
allChunks: true
}),
new Webpack.HotModuleReplacementPlugin(),
new BundleTracker({filename: './webpack-stats.json'})
];
config.module.loaders = [
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.jsx$/, loader: 'jsx-loader' },
{ test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
{ test: /\.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
{ test: /\.css$/, exclude: /node_modules/, loader: 'style-loader!css-loader' }
];
// dev server for react hot loader
config.devServer = {
publicPath: "/js/",
filename: 'main.js',
contentBase: "./public",
hot: true,
inline: true,
lazy: false,
quiet: true,
noInfo: true,
headers: {"Access-Control-Allow-Origin": "*"},
stats: {colors: true},
host: "0.0.0.0",
port: port
};
module.exports = config;