Webpack-dev-server does not place bundle in dist

11
votes

I am trying to setup a Webpack configuration for a website I want to build. I want to compile SASS to CSS and place it into the dist folder. When I run npm run build it works fine but when I run npm run watch to trigger the Webpack-dev-server it does not compile the index.js to bundle.js and it won't appear in the dist folder. Is there something wrong with my webpack.config.js?

index.html

<html>
    <head>
        <title>Getting Started</title>
        <link rel="stylesheet" href="dist/css/main.min.css">
    </head>
    <body>
        test
        <script src="dist/scripts/bundle.js"></script>
    </body>
</html>

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSass = new ExtractTextPlugin({
    filename: "../css/main.min.css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = {
  entry: './src/scripts/index.js',
  output: {
    path: path.resolve(__dirname, 'dist/scripts'),
    filename: 'bundle.js',
    publicPath: 'dist/scripts'
  },
  module: {
    rules: [
        {
            test: /\.scss$/,
            use: extractSass.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }],

                fallback: "style-loader"
            })
        }   
    ]
  },
  plugins: [
    extractSass
  ]
};

package.json

{
  "name": "project1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --optimize-minimize",
    "watch": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.2",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
  },
  "dependencies": {}
}
4
webpackwebpack-dev-server
webpack-dev-server does not write files to disk. "the /webpack-dev-server route will show where files are served. " from webpack.js.org/configuration/dev-server – olore

4 Answers

12
votes

You can look to the generated URLs by webpack-dev-server into this URL.

http://localhost:8080/webpack-dev-server (change host and port as needed)

webpack-dev-server is not going to write the files into disk, but you can see them there.

11
votes

webpack-dev-server serves from memory. If you want to see the files on disk during development with webpack-dev-server, you'll need to run a standard webpack build concurrently. See this answer for details.

8
votes

dev server have the option writeToDisk

module.exports = { //... devServer: { writeToDisk: true } };

check this : https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-

2
votes

You've noticed that dist/scripts is not updated.
Like others have said, the webpack-dev-server only keeps it in memory.
But you can take advantage of this.

Add this to your webpack.config.js:

module.exports = {
...
  devServer: {
    open: true,             // Automatically open the browser
    hot: true,              // Automatically refresh the page whenever bundle.js 
    publicPath: '/dist/scripts',
  },
...
};

publicPath: '/dist/scripts'
This is where the magic is.
By default, webpack-dev-server serves the config's output.filename on localhost:8080/ (eg. localhost:8080/bundle.js).
We changed it so that it serves the content on localhost:8080/dist/scripts/ (eg. localhost:8080/dist/scripts/bundle.js).
Now your index.html will be able successfully find <script src="dist/scripts/bundle.js"></script>.

NOTE: You must visit your index.html via localhost:8080 for this work.
eg. visiting from file://... or a different host/port will not work because it will look for the actual file on your system (which is not updated of course).

Alternatively, if you have output: { filename: '/dist/scripts/bundles.js } } instead of output: { filename: 'bundles.js } } then publicPath will be unnecessary.