Javascript Webpack dist:index.html是一个空白页
我对Webpack还很陌生,我一直在为React应用程序添加身份验证 在开发过程中一切都很好,但是当我试图运行分发文件时,我得到了一个空白页 这是我的webpack.config.js:Javascript Webpack dist:index.html是一个空白页,javascript,html,reactjs,webpack,Javascript,Html,Reactjs,Webpack,我对Webpack还很陌生,我一直在为React应用程序添加身份验证 在开发过程中一切都很好,但是当我试图运行分发文件时,我得到了一个空白页 这是我的webpack.config.js: const NODE_ENV = process.env.NODE_ENV; const dotenv = require('dotenv'); const webpack = require('webpack'); const fs = require('fs'); const path =
const NODE_ENV = process.env.NODE_ENV;
const dotenv = require('dotenv');
const webpack = require('webpack');
const fs = require('fs');
const path = require('path'),
join = path.join,
resolve = path.resolve;
const getConfig = require('hjs-webpack');
const isDev = NODE_ENV === 'development';
const isTest = NODE_ENV === 'test';
const root = resolve(__dirname);
const src = join(root, 'src');
const modules = join(root, 'node_modules');
const dest = join(root, 'dist');
var config = getConfig({
isDev: isDev,
in: join(src, 'app.js'),
out: dest,
html: function (context) {
return {
'index.html': context.defaultTemplate({
title: 'My Title',
publicPath: isDev ? 'http://localhost:3000/' : 'http://localhost:9000/',
meta: {
'name': 'My name',
'description': 'My desc'
}
})
}
}
});
// ENV variables
const dotEnvVars = dotenv.config();
const environmentEnv = dotenv.config({
path: join(root, 'config', `${NODE_ENV}.config.js`),
silent: true,
});
const envVariables =
Object.assign({}, dotEnvVars, environmentEnv);
const defines =
Object.keys(envVariables)
.reduce((memo, key) => {
const val = JSON.stringify(envVariables[key]);
memo[`__${key.toUpperCase()}__`] = val;
return memo;
}, {
__NODE_ENV__: JSON.stringify(NODE_ENV)
});
config.plugins = [
new webpack.DefinePlugin(defines)
].concat(config.plugins);
// END ENV variables
// CSS modules
const cssModulesNames = `${isDev ? '[path][name]__[local]__' : ''}[hash:base64:5]`;
const matchCssLoaders = /(^|!)(css-loader)($|!)/;
const findLoader = (loaders, match) => {
const found = loaders.filter(l => l && l.loader && l.loader.match(match))
return found ? found[0] : null;
}
// existing css loader
const cssloader =
findLoader(config.module.loaders, matchCssLoaders);
const newloader = Object.assign({}, cssloader, {
test: /\.module\.css$/,
include: [src],
loader: cssloader.loader.replace(matchCssLoaders, `$1$2?modules&localIdentName=${cssModulesNames}$3`)
})
config.module.loaders.push(newloader);
cssloader.test = new RegExp(`^(?!.*(module|bootstrap)).*${cssloader.test.source}`)
cssloader.loader = newloader.loader
config.module.loaders.push({
test: /bootstrap\.css$/,
include: [modules],
loader: 'style-loader!css-loader'
})
// postcss
config.postcss = [].concat([
require('precss')({}),
require('autoprefixer')({}),
require('cssnano')({})
])
// END postcss
// Roots
config.resolve.root = [src, modules]
config.resolve.alias = {
'css': join(src, 'styles'),
'containers': join(src, 'containers'),
'components': join(src, 'components'),
'utils': join(src, 'utils'),
'styles': join(src, 'styles')
}
// end Roots
// Testing
if (isTest) {
config.externals = {
'react/addons': true,
'react/lib/ReactContext': true,
'react/lib/ExecutionEnvironment': true,
}
config.module.noParse = /[/\\]sinon\.js/;
config.resolve.alias['sinon'] = 'sinon/pkg/sinon';
config.plugins = config.plugins.filter(p => {
const name = p.constructor.toString();
const fnName = name.match(/^function (.*)\((.*\))/)
const idx = [
'DedupePlugin',
'UglifyJsPlugin'
].indexOf(fnName[1]);
return idx < 0;
})
}
// End Testing
module.exports = config;
我得到的只是一个空白页面,上面有以下标记:
<!doctype html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>My title</title>
<link rel="stylesheet" href="http://localhost:9000/stylesheet.css"/>
</head>
<body>
<div id="root"></div>
<script src="http://localhost:9000/javascript.js"></script>
</body>
我的头衔
不确定我遗漏了什么,似乎根本没有任何JS在执行,我也不确定如何调试缩小的JS
任何帮助或指点都将不胜感激
谢谢您的express服务器未配置为提供静态文件(html除外)。在通配符路由之前添加
express.static
中间件。您能截屏控制台吗?当然,这有帮助吗?我指的是浏览器中的开发工具控制台;抱歉不清楚。是的,抱歉,我已经编辑了上面的评论。看来我的CSS和JS都被HTML标记所取代了…@jcbmb记得接受一个答案,这样其他人就知道问题已经解决了(我也得到了分数!)。
<!doctype html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>My title</title>
<link rel="stylesheet" href="http://localhost:9000/stylesheet.css"/>
</head>
<body>
<div id="root"></div>
<script src="http://localhost:9000/javascript.js"></script>
</body>