Javascript 在网页包生产配置中找不到Bundle.js
我正在使用两种配置的webpack,我的react应用程序的dev和prod。dev工作正常,但当我使用prod启动express服务器时,它会给我一个错误,即未找到bundle.js,即使在运行build命令时,它会在dist文件夹中构建bundle.js 这是我的webpack.prod.jsJavascript 在网页包生产配置中找不到Bundle.js,javascript,node.js,reactjs,express,webpack,Javascript,Node.js,Reactjs,Express,Webpack,我正在使用两种配置的webpack,我的react应用程序的dev和prod。dev工作正常,但当我使用prod启动express服务器时,它会给我一个错误,即未找到bundle.js,即使在运行build命令时,它会在dist文件夹中构建bundle.js 这是我的webpack.prod.js const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require(
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'source-map',
entry: './app/app.js',
output: {
path: path.join(__dirname, '..', 'dist'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
}),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: {
warnings: false,
},
}),
],
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
include: path.join(__dirname, '..', 'app'),
exclude: /node_modules/,
query: {
presets: ['es2015', 'react'],
},
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
},
],
},
};
mypackage.json文件
"scripts": {
"start": "cross-env NODE_ENV=production node server",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config ./webpack/webpack.dev.js --hot --inline",
"build": "rm -rf dist && webpack --config ./webpack/webpack.prod.js --progress --colors",
"test": "jest"
},
"dependencies": {
"boostrap": "^1.0.0",
"cross-env": "^4.0.0",
"enzyme-to-json": "^1.5.1",
"express": "^4.15.2",
"react": "15.4.1",
"react-dom": "15.4.1",
"react-router": "3.0.0",
"whatwg-fetch": "^2.0.3"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-jest": "^19.0.0",
"babel-loader": "^6.4.1",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"chai": "^3.5.0",
"css-loader": "^0.28.0",
"enzyme": "^2.8.2",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"file-loader": "^0.11.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"jest": "^19.0.2",
"node-sass": "^4.5.2",
"react-addons-test-utils": "^15.5.1",
"react-hot-loader": "^1.3.1",
"sass-loader": "^6.0.3",
"sinon": "^2.1.0",
"style-loader": "^0.16.1",
"webpack": "^2.4.1",
"webpack-dev-middleware": "^1.10.1",
"webpack-dev-server": "^2.4.2",
"webpack-hot-middleware": "^2.18.0"
}
正如您在下面的目录结构中所看到的,dist/bundle.js显然存在,但webpack/express似乎没有得到它
项目目录:
瑞丁给出的解决方案解决了这个问题 您需要设置express后端以将dist文件夹作为一项资产提供服务。您应该编辑此答案以包含解决方案(您仍然可以将积分归功于Rei Dien,但答案将更好地遵循此网站的格式)。