Webpack 开发服务器不显示内容
webpack dev server does not show the content
我在运行 webpack 开发服务器时遇到以下问题:当我运行 npm start 时,它显示以下内容:
➜ 目录 git:(暂存( ✗ npm start
目录@1.0.0 启动目录 BUILD_DEV=1 BUILD_STAGING=1 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js
http://localhost:8080/
webpack 结果来自/undefined/
内容来自
目录 404 将回退到/index.html
哈希:75773622412153d5f921
版本: 网络包 1.12.11
时间:43330ms
我想问题可能是因为以下行:webpack 结果来自/undefined/
当我在 http://localhost:8080/ 打开浏览器时,它如下所示:
无法获取/
控制台中没有任何内容。
你对这个问题有什么想法吗?
更新:WEBPACK 配置文件
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const deps = [
'moment/min/moment.min.js',
'underscore/underscore-min.js',
];
/* Include SASS path here if you want to this in your sass files:
* @import 'bourbon';
*/
const bourbon = require('node-bourbon').includePaths;
const TARGET = process.env.npm_lifecycle_event;
const ROOT_PATH = path.resolve(__dirname);
const SASS_DEPS = [bourbon].toString();
const BUILD_NUMBER = process.env.CI_BUILD_NUMBER;
const common = {
entry: path.resolve(ROOT_PATH, 'app/index.js'),
output: {
filename: BUILD_NUMBER + '-[hash].js',
path: path.resolve(ROOT_PATH, 'build'),
publicPath: `/${BUILD_NUMBER}/`,
},
module: {
loaders: [
{
test: /'.scss$/,
loaders: ['style', 'css', 'sass?includePaths[]=' + SASS_DEPS],
include: path.resolve(ROOT_PATH, 'app'),
},
{
test: /'.css$/,
loaders: [
'style',
'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'sass?includePaths[]=' + SASS_DEPS,
'postcss'
],
include: path.resolve(ROOT_PATH),
exclude: /(pure'/grids|Grids).*'.css$/,
},
{
test: /(pure'/grids|Grids).*'.css$/,
loaders: [
'style',
'css',
'sass?includePaths[]=' + SASS_DEPS,
],
include: path.resolve(ROOT_PATH),
},
{
test: /'.woff(2)?('?v=[0-9]'.[0-9]'.[0-9])?$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff',
},
{ test: /'.(ttf|eot|svg)('?v=[0-9]'.[0-9]'.[0-9])?$/,
loader: 'file-loader',
},
{
test: /'.json$/,
loader: 'json',
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
template: path.resolve(ROOT_PATH, 'app/index.html'),
inject: 'body',
minify: {
removeComments: true,
collapseWhitespace: true,
},
}),
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'false')),
__STAGING__: JSON.stringify(JSON.parse(process.env.BUILD_STAGING || 'false')),
__API_HOST__: JSON.stringify(process.env.BUILD_STAGING ? 'my.api' : 'my.api'),
}),
],
resolve: {
alias: {
'styles': path.resolve(ROOT_PATH, 'app/styles'),
},
extensions: ['', '.js', '.jsx', '.json'],
},
postcss: function() {
return [
require('postcss-import'),
require('autoprefixer'),
require('postcss-cssnext'),
]
}
};
if (TARGET === 'start' || !TARGET) {
module.exports = merge(common, {
output: {
filename: '[hash].js',
path: path.resolve(ROOT_PATH, 'build'),
publicPath: '/',
},
devtool: 'eval-source-map',
module: {
loaders: [
{
test: /'.jsx?$/,
loaders: [
'react-hot',
'babel-loader'
],
include: path.resolve(ROOT_PATH, 'app'),
},
],
},
devServer: {
colors: true,
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
});
} else if (TARGET === 'build' || TARGET === 'builds') {
const config = {
resolve: {
alias: {},
},
module: {
loaders: [
{
test: /'.jsx?$/,
loader: 'babel-loader',
include: path.resolve(ROOT_PATH, 'app'),
},
],
noParse: [],
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compressor: {
screw_ie8: true,
warnings: false,
},
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env': { 'NODE_ENV': JSON.stringify(process.env.NODE_ENV) },
}),
],
};
deps.forEach((dep) => {
const depPath = path.resolve(nodeModulesDir, dep);
config.resolve.alias[dep.split(path.sep)[0]] = depPath;
config.module.noParse.push(depPath);
});
module.exports = merge(common, config);
}
当我开始使用 babel-loader> 6 时,我也遇到了同样的问题。
通过在 webpack 开发服务器配置中添加 contentBase 来修复此问题。
就我而言,它看起来像这样
new WebPackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true,
contentBase: __dirname + '/public'
}).listen(3000, 'localhost')
看到您的 webpack 配置文件以查明确切的问题,但从错误消息中,可能存在多个问题
- 确保您在正确的
port
- 确保您的 webpack 配置具有
path
和public path
设置 - 确保您
contentBase
设置为井
如果没有看到您的 webpack 文件和更具体的细节,就很难查明问题所在。但是,您可以随时转到 https://webpack.github.io/docs/webpack-dev-server.html 以获取有关如何设置它的信息。
- Web 开发在刷新后显示/隐藏
- 为什么我的Alexa技能测试显示正确的lambda输出,但在开发人员控制台中测试时却给出错误消息
- 如何通过ibmworklight中的sql适配器从db2中检索或显示html页面上的数据?android混合应用程序开发
- 未注释img´除非调整浏览器大小、缩放或打开开发工具,否则不会显示
- Chrome 开发工具:如何计算加载弹出窗口并将其显示在页面上所需的总时间
- 无法访问在开发人员工具中显示但不在页面源中的元素
- 没有Chrome开发工具,王牌编辑器就不会显示
- 正在开发内存匹配游戏 - 您能否以不同的方式显示一张图像
- CSS样式没有显示在浏览器上,但检查器/开发工具说它正在应用
- Chrome 开发工具显示将 jQuery 对象数组打印到屏幕上
- CRM 2011 Javascript已加载,但不显示在开发人员工具中
- 在rails搜索引擎上开发类似关键字突出显示的Google
- Sails JS - 显示闪存消息在 Heroku(生产)上不起作用,但在开发中工作正常
- Webpack 开发服务器不显示内容
- 为什么Chrome开发工具将日期__proto__显示为无效日期
- Chrome:JQuery动画;仅当在开发人员工具中选择时才显示工作
- 每当出现JavaScript错误时,都会显示一条突出的错误消息(用于开发)
- Web开发:如何显示所有错误(使错误变得详细)
- Web开发显示本地文件
- IE9的JavaScript问题-当显示开发人员工具栏时没有问题