我正在为我的反应应用程序使用webpack,dev和prod的两个配置。开发工作正常,但是当我使用prod启动快速服务器时,它会给我一个错误,即找不到bundle.js,即使在运行build命令时它会在dist文件夹中构建bundle.js。
这是我的webpack.prod.js
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'],
},
],
},
};
我的package.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似乎没有得到它
项目目录:
答案 0 :(得分:0)
Rei Dien给出的解决方案解决了这个问题!