I am able to webpack with my webpack.config.js as is, and the changes are reflected when I view my index.html in the browser without using webpack-dev-server.
webpack.config.js
var webpack = require('webpack');
var path = require('path');
var APP_DIR = path.resolve(__dirname, 'src/client/app/');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public/');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
publicPath: BUILD_DIR,
filename: 'bundle.js'
},
watch: true,
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel-loader'
}
]
}
};
module.exports = config;
When I try to run webpack-dev-server with a watch on my files, the service recognizes that a save was made, returns "Compiled Successfully" and the app indicates that it is refreshing at my localhost:8080/webpack-dev-server/, but does not update the bundle.js designated in the output. I have seen a lot of questions that are resolved by including the publicPath key value pair, however I already have that included, and I am still unable to see the edits when my server hot updates.
The following are the packages installed in the directory
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": ""
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
},
"devDependencies": {
"babel-core": "^6.26.0",
"webpack-dev-server": "^2.9.4"
}
}
And my jsx file being compiled is a simple first react component
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return <p>Hello World!</p>;
}
}
render(<App/>, document.getElementById('app'));
答案 0 :(得分:0)
将您的webpack配置更改为以下内容: (注意:我在这里更改了APP_DIR和BUILD_DIR以进行测试。
var webpack = require('webpack');
var path = require('path');
var APP_DIR = path.resolve(__dirname, 'src/');
var BUILD_DIR = path.resolve(__dirname, 'build/');
var config = {
entry: APP_DIR + '/index.js',
output: {
path: BUILD_DIR,
filename: 'bundle.js',
publicPath: '/'
},
watch: true,
module : {
loaders : [
{
test : /\.js?/,
include : APP_DIR,
loader : 'babel-loader'
}
]
},
devServer: {
contentBase: APP_DIR
}
};
module.exports = config;
请注意,我改变了:
output.publicPath
:这是相对于服务器根目录,而不是绝对路径。更多信息:What does "publicPath" in webpack do? devServer.contentBase
:我改变了这一点,以便在运行服务器时点击/src
目录中的html文件。这应该有效! =)