Develop Reference

Webpack4 optimization issue

it's almost 2am and I'm just going insane seeking for a mistake.
"Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead." console told me for 100 time...
I've tried to modify my webpack.config.js like this:
optimization: {
minimize: false
}
and this
optimization: {
minimizer: [
// we specify a custom UglifyJsPlugin here to get source maps in production
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
})
]
},
and always the same problem...
My files are ok because it's bundled as well, but when I try to open it by
"start": "webpack-dev-server --mode development --open --hot"
or
"start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist"
well, it doesn't matter, I had read many articles about this, it's some kind of problem with webpack3 -> webpack4 version, but I've copied some code for configuration and just can't figure out by myself how to fix it (maybe it's because I'm 12+ hours with laptop one by one and tired as hell, but I'm going to sleep and just hope that when I woke up someone, great person, as well will help me to solve this.
If you some kind of a person that wants to give me an article instead of an answer - it's great too! I'm full about learning new stuff.
But, if you help with an answer and article - it'll give you +100 to your luck :)
my webpack.config.js and package.json below:
(I left this const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); just to show you that I tried to do some optimization with this as well)
/webpack.config.js
var webpack = require("webpack")
var path = require("path")
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
process.noDeprecation = true
module.exports = {
entry: "./src/index.js",
output: {
path:path.join(__dirname, 'dist', 'assets'),
filename: "bundle.js",
sourceMapFilename: 'bundle.map'
},
devtool: '#source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['env', 'stage-0', 'react']
}
},
{
test: /\.css$/,
use: ['style-loader','css-loader', {
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')]
}}]
},
{
test: /\.scss/,
use: ['style-loader','css-loader', {
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')]
}}, 'sass-loader']
}
]
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
warnings: false,
mangle: false
})
]
}
/package.json
{
"name": "try",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"keywords": [
"React",
"state",
"setState",
"explicitly",
"passing",
"props"
],
"author": "andrii",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"postcss-loader": "2.0.6",
"style-loader": "^0.23.0",
"uuid": "^3.3.2",
"sass-loader": "6.0.6",
"webpack": "^4.19.0",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"babel-plugin-syntax-object-rest-spread": "^6.13.0",
"babel-preset-stage-2": "^6.24.1",
"httpster": "1.0.3",
"isomorphic-fetch": "^2.2.1",
"prop-types": "^15.6.2",
"react": "^16.5.1",
"react-dom": "^16.5.1",
"react-icons": "^3.1.0",
"react-redux": "5.0.6",
"react-router-dom": "^4.3.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack-dev-server": "^3.1.8"
}
}
Also, to avoid any angry mood I listen to this: http://prntscr.com/l31bam on replay over 2+ hours if you like classic and piano as well - this composition is brilliant.
Thank you for your time and have a nice day!

I use webpack4 on production and have to use UglifyJsPlugin as well.
First of all I would ensure that you have proper version of webpack and UglifyJsPlugin in your package.json
I currently have
"webpack": "4.20.2", and "uglifyjs-webpack-plugin": "2.0.1",
To ensure that they are properly installed I would advise to double check that proper versions are installed by running:
rm -rf node_modules && npm install OR rm -rf node_modules && yarn install whatever works for you.
Next I would check the config. My webpack.production.js which works is the following
// ...
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
// ...
mode: 'production',
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false, // set to true if you want JS source maps
}),
],
},
module: {
//...
},

Webpack 4 and Uglify Plugin (TypeError: Cannot read property 'length' of undefined)

I'm having problems with Webpack 4 on a Linux machine. The build works fine in dev mode, but fail in production. It also seems to be working on a windows machine. I did try do downgrade webpack to an older version and nothing.
Nodejs:
v10.2.1
*TypeError: Cannot read property 'length' of undefined* at node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:59
this.workers = workers === true ? _os2.default.cpus().length - 1 : Math.min(Number(workers) || 0, _os2.default.cpus().length - 1);
packge.json
{
"name": "webpack-demo",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"build": "webpack -p"
},
"devDependencies": {},
"dependencies": {
"#types/node": "^10.5.1",
"css-loader": "^0.28.11",
"global": "^4.3.2",
"node-sass": "^4.9.1",
"npm": "^6.1.0",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"ts-loader": "^4.4.2",
"typescript": "^2.9.2",
"uglifyjs-webpack-plugin": "1.0.0-beta.2",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8"
}
}
webpack.config.js
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var webpack = require('webpack');
module.exports = {
entry: './src/index.ts',
devtool: 'source-map',
mode: 'production',
module: {
rules: [{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
exclude: /node_modules/
}
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js','.css','.scss']
},
plugins: [
new UglifyJsPlugin()
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
}
}

Setting mode to production in Webpack v4 should do enough optimisations, so there's no need to specifically require the Uglify plugin. Try remove uglifyjs-webpack-plugin and there's also no need for passing the -p flag for the build script.
If you want to customise the Uglify plugin, you can also do so in Webpack's optimization config, see https://webpack.js.org/configuration/optimization/
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
//...
optimization: {
minimizer: [
new UglifyJsPlugin({ /* your config */ })
]
}
};
Finally, I have a basic webpack v4 starter boilerplate with all the latest ecosystem on Github, take a look and see if it will help you or not

How to build static website by parsing pug, sass and js into final html, css and js2015?

I've done some Node.js work, but now some "client" has asked me to make a static page like to be hosted on GitHub gh-pages, and have some static navigation but I want to build it with pug, sass, and js. I've tried with some webpack configurations but version 4 seems to be having problems with some of the plugins. Any idea, project, generator or anything would be appreciated.
Thanks. Alex
For example, i've come up with this webpack config, if anyone can make it better would be really nice.
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: ['css-loader', 'sass-loader'],
publicPath: '/dist'
})
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.pug$/,
use: [
'file-loader?name=[name].html',
'pug-html-loader?pretty&exports=false'
]
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: false,
port: 3030,
stats: 'errors-only'
},
plugins: [
new ExtractTextPlugin({
filename: 'styles.css',
disable: false,
allChunks: true
})
]
};

Keep it simple and use command line tools, via scripts in package.json. Here's an example
"scripts":{
"start": "http-server -o -c-1",
"build-sass": "node-sass scss/style.scss style.css",
"watch-sass": "npm run build-sass && onchange 'scss/*' -- npm run build-sass",
"watch-js": "watchify js/main.js -o bundle.js -v",
"build-js": "browserify js/main.js -t [ babelify --presets [ env ] ] | uglifyjs -c -m > bundle.js",
"build": "npm run build-sass && npm run build-js",
"dev": "npm run watch-sass & npm run watch-js & npm start"
},
"dependencies": {
"babel-core": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babelify": "^8.0.0",
"browserify": "^16.1.0",
"http-server": "^0.11.0",
"node-sass": "^4.7.2",
"onchange": "^3.3.0",
"uglify-es": "^3.3.9",
"watchify": "^3.10.0"
}
For a big project you might want something more complicated, but this works for me most of the time.

How can I build/deploy an angular 2 project to production?

I have created a site using Angular 2. I started making my site using the Angular 2 QuickStart Guide as base and it's working like it should if I use the command npm start. Now that the site is finished I need to build/deploy (don't know the correct definition) to production so the site can be access to the client. The question is: how to I build this project for production? (without the need to run npm install)
The best thing I could found was to to try ng build -prod, but it says that my project is not a cli project. How to a generate the independent files to open just the index.htmlpage and access the site? Is it possible?
Update:
Maybe I was not clear: what I'm looking for is a way to get all the TypeScripts files and build it in a pure HTML/JavaScript/CSS site ready to display. No compression or minify needed at the moment. Is it possible? If not, what are other solutions (preferably independent on the host)?

So from what I understand from using Angular2 the last few weeks is what you're essentially creating is a client-side single page app so all you need to deliver is the HTML page with references to the respective JavaScript files.
I've been investigating WebPack for packaging an application (and still in the middle of getting it right), however, WebPack will combine all the compiled typescript files into a single (or multiple, still working on this part) Javascript files while also injecting the reference to the javascript files into your index.html page.
My current project compiles the typescript files (using gulp) using a web pack config to configure the output javascript file (main.ts -> main.js):
gulp.task("build-tsc", function() {
return gulp.src("entry.js")
.pipe(webpack( require("../../../webpack.config.js")))
.pipe(gulp.dest(config.dist));
});
My web pack.config.js looks like (the webpack module ignores the fact I don't have an entry.js):
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
module.exports = {
entry: {
"main": "./src/app/main.ts",
"share": "./src/app/share_main.ts",
"polyfills": "./src/app/polyfills.ts"
},
output: {
path: __dirname,
filename: "[name].js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{ test: /\.ts$/, loader: 'ts-loader' }
]
},
resolve: {
extensions: ['', '.js', '.ts']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['main', 'share', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};
My original codebase is:
src/
index.html
assets/
styles/
main.scss
app/
app.component.ts
app.routes.ts
app.module.ts
share_main.ts
polyfills.ts
dashboard/
dashboard.component.ts
dashboard.html
navbar/
navbar.component.ts
navbar.html
So what I end up with (post build) is a new dist/ directory with the files in place for use:
dist/
index.html
main.js
share.js
polyfill.js
app/
dashboard/
dashboard.html
navbar/
navbar.html
styles/
main.css
Right now I'm using browserSync for now to serve the files for dev purposes, but you theoretically should be able to serve them up as static content via NGINX, Apache or proxy them through NGINX/Apache to lite-server.
The idea behind WebPack is that you give it an entry point (in this case main.ts) and it crawls the import statements ensuring that anything it encounters is added to the resulting Javascript files then adds them to the index.html file automatically.
Like I mentioned I've got a working app but I'm trying to understand the "multiple entry points" better but the above should work just the same.

I'm really bad at dealing with webpack and wasn't able to Anthony Ikeda solution or any other solution I found on web. If anyone get stuck in this like me, my solution was to use Angular Cli. I create a new project with angular cli, create all the pages, components and services with angular cli and copied the code from the old no-cli project to this new cli project. With a cli project, I used the ng build command to build the project and get the files to deploy.

I'm using this solution and it works perfectly for me (only html + css + js files) ... only minification give me some problems.
My webpack.config.js:
/// <binding />
var environment = (process.env.NODE_ENV || "development").trim();
if (environment === "development") {
module.exports = require('./webpack.dev.js');
} else {
module.exports = require('./webpack.prod.js');
}
My webpack.dev.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var path = require('path');
module.exports = {
entry: {
"polyfills": "./polyfills.ts",
"vendor": "./vendor.ts",
"app": "./app/main.ts",
},
resolve: {
extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
},
output: {
path: "./app_build",
filename: "js/[name]-[hash:8].bundle.js"
},
devtool: 'source-map',
module: {
loaders: [
{
loader: "babel-loader",
// Skip any files outside of your project's `src` directory
//include: [
// "app_build",
//],
exclude: [
path.resolve(__dirname, "node_modules")
],
// Only run `.js` and `.jsx` files through Babel
test: /\.js/,
// Options to configure babel with
query: {
plugins: ['transform-runtime', 'babel-plugin-transform-async-to-generator'],
presets: ['es2015', 'stage-0'],
}
},
{
test: /\.ts$/,
loader: "ts"
},
{
test: /\.html$/,
loader: "html"
},
//{
// test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/,
// loader: "file?name=assets/[name]-[hash:6].[ext]",
//},
{
test: /\.(png|jpg|gif|ico)$/,
//include: path.resolve(__dirname, "assets/img"),
loader: 'file?name=/assets/img/[name]-[hash:6].[ext]'
},
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
// exclude: /node_modules/,
loader: 'file?name=/assets/fonts/[name].[ext]'
},
// Load css files which are required in vendor.ts
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
},
]
},
plugins: [
new ExtractTextPlugin("css/[name]-[hash:8].bundle.css", { allChunks: true }),
new webpack.optimize.CommonsChunkPlugin({
name: ["app", "vendor", "polyfills"]
}),
new CleanWebpackPlugin(
[
"./app_build/js/",
"./app_build/css/",
"./app_build/assets/",
"./app_build/index.html"
]
),
// inject in index.html
new HtmlWebpackPlugin({
template: "./index.html",
inject: "body"
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
],
devServer: {
//contentBase: path.resolve(__dirname, "app_build/"),
historyApiFallback: true,
stats: "minimal"
}
};
My webpack.prod.js:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var path = require('path');
var BabiliPlugin = require("babili-webpack-plugin");
module.exports = {
entry: {
"polyfills": "./polyfills.ts",
"vendor": "./vendor.ts",
"app": "./app/main.ts"
},
resolve: {
extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
},
output: {
path: "./app_build",
filename: "js/[name]-[hash:8].bundle.min.js"
},
module: {
loaders: [
{
loader: "babel-loader",
// Skip any files outside of your project's `src` directory
//include: [
// "app_build",
//],
exclude: [
path.resolve(__dirname, "node_modules")
],
// Only run `.js` and `.jsx` files through Babel
test: /\.js/,
// Options to configure babel with
query: {
plugins: ['transform-runtime', 'babel-plugin-transform-async-to-generator'],
presets: ['es2015', 'stage-0'],
}
},
{
test: /\.ts$/,
loader: "ts"
},
{
test: /\.html$/,
loader: "html"
},
//{
// test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/,
// loader: "file?name=assets/[name]-[hash:6].[ext]",
//},
{
test: /\.(png|jpg|gif|ico)$/,
//include: path.resolve(__dirname, "assets/img"),
loader: 'file?name=assets/img/[name]-[hash:6].[ext]'
},
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
// exclude: /node_modules/,
loader: 'file?name=/assets/fonts/[name].[ext]'
},
// Load css files which are required in vendor.ts
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
},
]
},
plugins: [
new ExtractTextPlugin("css/[name]-[hash:8].bundle.css", { allChunks: true }),
new webpack.optimize.CommonsChunkPlugin({
name: ["app", "vendor", "polyfills"]
}),
new CleanWebpackPlugin(
[
"./app_build/js/",
"./app_build/css/",
"./app_build/assets/",
"./app_build/index.html"
]
),
// inject in index.html
new HtmlWebpackPlugin({
template: "./index.html",
inject: "body"
}),
new BabiliPlugin({ comments: false }),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
],
devServer: {
historyApiFallback: true,
stats: "minimal"
}
};
and then my package.json (with command to build for prod):
{
"name": "dipendentistatali",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"start": "tsc && npm install && npm run build",
"watch": "SET NODE_ENV=development && webpack --watch --color",
"test": "webpack-dev-server --inline --hot",
"build": "SET NODE_ENV=development && webpack -d --color",
"buildProduction": "SET NODE_ENV=production && webpack -d --color",
"lint": "tslint ./app/**/*.ts -t verbose",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"keywords": [],
"author": "",
"dependencies": {
"#angular/common": "2.1.1",
"#angular/compiler": "2.1.1",
"#angular/core": "2.1.1",
"#angular/forms": "2.1.1",
"#angular/http": "2.1.1",
"#angular/platform-browser": "2.1.1",
"#angular/platform-browser-dynamic": "2.1.1",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.15",
"angular2-cool-http": "^1.2.3",
"angular2-toaster": "^1.0.1",
"babel-plugin-transform-async-to-generator": "^6.16.0",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"jquery": "2.2.4",
"ng2-bs3-modal": "^0.10.4",
"ng2-modal": "0.0.22",
"ng2-resource-rest": "^1.5.3",
"ng2-slim-loading-bar": "^2.0.4",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23"
},
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-plugin-transform-es2015-arrow-functions": "^6.8.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"clean-webpack-plugin": "0.1.10",
"concurrently": "^2.2.0",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.15.0",
"lite-server": "^2.2.2",
"lodash": "^4.11.1",
"node-sass": "^3.13.0",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.2",
"sass-loader": "^3.2.3",
"style-loader": "^0.13.1",
"ts-loader": "^0.8.1",
"tslint": "^3.7.4",
"typescript": "^2.0.2",
"typings": "^1.3.2",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2",
"webpack-merge": "^0.9.0",
"webpack-stream": "^3.2.0"
}
}
So if you launch npm start build it build the prod version in a directory that i called app_build/
Hope it can help you

bundle.js missing from webpack build when using webpack-dev-server

I looked at similar but couldnt find a concerete answer that resolved my issue. I can't find the bundle.js file even though I am specifying where it should be outputted and everything works in the browser. I understand that the webpack-dev server is loading the files from memory and nothing is being written to disk, how I can get the file to be built and added to the dir specified in the output property in the config file?
Here is my package.json:
{
"name": "redux-simple-starter",
"version": "1.0.0",
"description": "Simple starter package for Redux with React and Babel support",
"main": "index.js",
"repository": "git#github.com:StephenGrider/ReduxSimpleStarter.git",
"scripts": {
"start": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js -- content-base build"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"react-hot-loader": "^1.3.0",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"babel-preset-stage-1": "^6.1.18",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.0.0",
"redux": "^3.0.4"
}
}
webpack config:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
output: {
path: path.join(__dirname, 'assets'),
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel'
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
contentBase: './'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};

When using the dev server, the output is placed on it. So you won't actually see it amongst your files. From your index.html file you will want to load it in from the server.
For example, for my app I load in dev server, my vendor files, and then my own code.
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="http://localhost:8080/build/vendor.js"></script>
<script src="http://localhost:8080/build/app.js"></script>
And here is the relevant portion of my webpack config. There is some unnecessary legacy bits from when I was also loading it in from a static build bundle.
app: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
'./client/index.js'
]
},
output: {
path: __dirname + '/client/build',
publicPath: '/build/',
filename: '[name].js',
pathinfo: true
},

This Webpack plugin forces the server to write the bundle to disk.
Although I agree with Austin and lux, if you need to have the file in disk, call webpack directly.

Include below script in the webpack.config.js file
devServer: {
writeToDisk: true
}

You can also tell webpack to watch using a flag in the config. This will generate the bundle file
module.exports = {
watch: true,
};

Replace your scripts object of package.json file with the following one:
"scripts": {
"start": "npm run build",
"build": "webpack -p && ./node_modules/webpack-dev-server/bin/webpack-dev-server.js -- content-base build"
},
Then, run $ npm start