Friday 21 April 2017

Bundle.js not found on webpack production config

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

project directory



via Rizvified

No comments:

Post a Comment