webpack-dev-server 正确监视和编译文件,但浏览器无法访问它们
webpack-dev-server watches and compiles files correctly, but browser can't access them
编辑:Link 到 github 托管此示例的回购是 here 以防有人想要 运行它
我遇到了与另一个用户几乎完全相同的问题(您可以找到问题 ),因为 运行 webpack-dev-server 实际上会编译和监视文件正确(在终端中看到控制台输出),但浏览器仍然无法正确查看我的站点。这是我的 webpack.config.js 文件:
var webpack = require('webpack'),
path = require('path'),
// webpack plugins
CopyWebpackPlugin = require('copy-webpack-plugin');
var config = {
context: path.join(__dirname,'app'),
entry: './index.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: path.join(__dirname, 'public')
},
devServer: {
// contentBase: './public/'
},
plugins: [
// copies html to public directory
new CopyWebpackPlugin([
{ from: path.join(__dirname, 'app', 'index.html'),
to: path.join(__dirname, 'public')}
]),
// required bugfix for current webpack version
new webpack.OldWatchingPlugin()
],
module: {
loaders: [
// uses babel-loader which allows usage of ECMAScript 6 (requires installing babel-preset-es2015)
{test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015']}},
// uses the css-loader (loads css content) and style-loader (inserts css from css-loader into html)
{test: /\.css$/, loader: 'style!css', exclude: /node_modules/}
]
}
};
module.exports = config;
这是我的目录结构:
+--- webpack/
+--- app/
+--- index.html
+--- index.js
+--- styles.css
+--- package.json
+--- webpack.config.js
目前,运行ning webpack-dev-server
在浏览器中输出以下内容(注意缺少 public/
目录,webpack 通常输出我的 html 和 javascript捆绑):
EDIT:添加 devServer.contentBase 属性 并将其设置为 public
让浏览器 return 出现 403 错误未找到,如下所示:
好的,所以我能够重现您在我的项目中遇到的问题。为了解决这个问题,我改变了一些东西。
这是我设置的。我在输出中少定义了一点,并使用 jsx 而不是 js,但结果应该是相同的。你可以用你的源代码替换我的src
。
const config = {
entry: './src/App.jsx',
output: {
filename: 'app.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'stage-0'],
plugins: ['add-module-exports']
}
},
{
include: /\.json$/, loaders: ['json-loader']
},
{
test: /\.scss$/,
loaders: ['style', 'css?modules', 'sass']
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file?name=fonts/[name].[ext]'
}
]
},
plugins: [
new webpack.ProvidePlugin({
'Promise': 'exports?module.exports.Promise!es6-promise',
'fetch': 'imports?self=>global!exports?global.fetch!isomorphic-fetch'
}),
new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
],
resolve: {
root: path.resolve('./src')
},
devServer: {
contentBase: 'src'
}
};
所以基本上您会希望在终端中输出以下内容:
webpack result is served from /
- 告诉我们无论我们构建什么都将在根目录
content is served from src
- 告诉我们它是从那个目录构建的
希望对您有所帮助
编辑:Link 到 github 托管此示例的回购是 here 以防有人想要 运行它
我遇到了与另一个用户几乎完全相同的问题(您可以找到问题
var webpack = require('webpack'),
path = require('path'),
// webpack plugins
CopyWebpackPlugin = require('copy-webpack-plugin');
var config = {
context: path.join(__dirname,'app'),
entry: './index.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: path.join(__dirname, 'public')
},
devServer: {
// contentBase: './public/'
},
plugins: [
// copies html to public directory
new CopyWebpackPlugin([
{ from: path.join(__dirname, 'app', 'index.html'),
to: path.join(__dirname, 'public')}
]),
// required bugfix for current webpack version
new webpack.OldWatchingPlugin()
],
module: {
loaders: [
// uses babel-loader which allows usage of ECMAScript 6 (requires installing babel-preset-es2015)
{test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015']}},
// uses the css-loader (loads css content) and style-loader (inserts css from css-loader into html)
{test: /\.css$/, loader: 'style!css', exclude: /node_modules/}
]
}
};
module.exports = config;
这是我的目录结构:
+--- webpack/
+--- app/
+--- index.html
+--- index.js
+--- styles.css
+--- package.json
+--- webpack.config.js
目前,运行ning webpack-dev-server
在浏览器中输出以下内容(注意缺少 public/
目录,webpack 通常输出我的 html 和 javascript捆绑):
EDIT:添加 devServer.contentBase 属性 并将其设置为 public
让浏览器 return 出现 403 错误未找到,如下所示:
好的,所以我能够重现您在我的项目中遇到的问题。为了解决这个问题,我改变了一些东西。
这是我设置的。我在输出中少定义了一点,并使用 jsx 而不是 js,但结果应该是相同的。你可以用你的源代码替换我的src
。
const config = {
entry: './src/App.jsx',
output: {
filename: 'app.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'stage-0'],
plugins: ['add-module-exports']
}
},
{
include: /\.json$/, loaders: ['json-loader']
},
{
test: /\.scss$/,
loaders: ['style', 'css?modules', 'sass']
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file?name=fonts/[name].[ext]'
}
]
},
plugins: [
new webpack.ProvidePlugin({
'Promise': 'exports?module.exports.Promise!es6-promise',
'fetch': 'imports?self=>global!exports?global.fetch!isomorphic-fetch'
}),
new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
],
resolve: {
root: path.resolve('./src')
},
devServer: {
contentBase: 'src'
}
};
所以基本上您会希望在终端中输出以下内容:
webpack result is served from /
- 告诉我们无论我们构建什么都将在根目录content is served from src
- 告诉我们它是从那个目录构建的
希望对您有所帮助