Webpack: how to compile, burn to disk and serve static content (js / css) using webpack-dev server

Question

I want to create js / css code, write it to disk and execute it using the webpack-dev server in one command. I do not want to configure another server for production mode. How do we do this? Separate the contents of my webpack.config.js below:

module.exports = {
watch: true,
entry: [
    './src/index.js'
],
output: {
    path: __dirname +'/dist/',
    publicPath: '/dist/',
    filename: 'bundle.js'
},
module: {
    loaders: [
        {
            exclude:/(node_modules)/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
},
devServer: {
    historyApiFallback: true,
    contentBase: './'
}
};

Please find the initial script used in package.json below:

"start": "webpack-dev-server --progress --colors"

I am launching npm run. Please, help.

Answer 1

You can change the definition of the startscript as follows:

"start": "webpack --watch & webpack-dev-server --inline --progress --colors".

webpack , , webpack-dev-server.

EDIT:

, :

• https://github.com/gajus/write-file-webpack-plugin
• https://github.com/FormidableLabs/webpack-disk-plugin

Answer 2

webpack-dev-server "" Express- Sock.js , . , webpack-dev- bundle , . , build (, , dist). docs:

, webpack-dev- build. Itll , .

, webpack-dev-server . , . , , Webpack:

, publicPath (. API). output. URL, ( ).

, -. , , . , watch. :

$ webpack --watch

NPM script, . , -w --watch.

// NPM `scripts` field:
"watch": "webpack -w"

webpack-dev-, , NPM script :

"scripts": {
  "serve": "npm run watch && npm run start",
  "start": "webpack-dev-server --progress --colors",
  "watch": "webpack -w"
}

$ npm run serve, .

---

, , Webpack :

new webpack.HotModuleReplacementPlugin()

. , , Babel. , query Babel .babelrc. , , :

{
  "presets": ["env", "es2015", "react"],
  "plugins": ["react-hot-loader/babel"]
}

---

, . Webpack , . , Webpack 2 , Babel ( ), ESLint ( ), CSS/Sass .