Search code examples
reactjswebpackbabeljspackage.jsonwebpack.config.js

Bundle file output not regenerated without build errors

New to webpack trying to understand how to make file structure, webpack.config.js and package.json work together, but not sure what is failing as the client.min.js(my outputted bunfdle file) is never regenerated upon NPM run dev

webpack.config.js:

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      }
    ]
  },
  output: {
    path: __dirname+"/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

package.json:

 {
  "name": "appThing",
  "version": "0.0.0",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.0",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "flux": "^2.1.1",
    "history": "^1.17.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-router": "^1.0.3",
    "webpack": "^2",
    "webpack-dev-server": "^2"
  },
  "scripts": {
    "dev": "webpack-dev-server --content-base src --inline --hot"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.7.0",
    "webpack-cli": "^2.0.10"
  },
  "description": ""
}

File structure:

enter image description here NPM run dev result:

enter image description here

Solution

  • webpack-dev-server does not generate files. It serves all assets from memory.

    If you want to generate files, run webpack.