I am using two configuration for webpack, dev and prod for my react app. The dev works fine but when i use the prod to start an express server, it gives me an error that bundle.js is not found, even though when running the build command it builds the bundle.js in the dist folder.
Here's my 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'],
},
],
},
};
my package.json file
"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"
}
As you can see in the directory structure below, dist/bundle.js is clearly present but webpack/express doesn't seem to get it
via Rizvified
No comments:
Post a Comment