Unable to automatically compile and update the screen with webpack-dev-server

I'm about to enter the front end.

Using webpack and surrounding technology,
- js and css are watched and automatically compiled when saving (when changing files)
- Browser when autocompiled (localhost:8080?)?) reloads automatically

We built the environment with yarn and webpack as follows.

package.json

{
  "name": "pf",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "./node_modules/.bin/webpack-dev-server"
  },
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "browser-sync": "^2.18.13",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "import-glob-loader": "^1.1.0",
    "node-ass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }
}

webpack.config.js

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

const publicDir=path.join(__dirname, '/public');
module.exports = [
  {
    entry: [
      './javascript/index.js',
      './javascript/skrollr.min.js',
    ],
    output: {
      path —publicDir,
      publicPath: '/',
      filename: 'bundle.js',
    },
    module: {
      loaders: [{
        exclude: /node_modules/,
        loader: 'babel-loader',
      }],
    },
    resolve: {
      extensions: ['.js',
    },
    devServer: {
      historyApiFallback: true,
      contentBase: './',
      inline —true,
      hot —true,
    },
  },
  {
    entry: {
      style: './stylesheets/index.scss',
    },
    output: {
      path —publicDir,
      publicPath: '/',
      filename: 'bundle.css',
    },
    module: {
      loaders:
        {
          test://\.css$/,
          loader: ExtractTextPlugin.extract ({ fallback: 'style-loader', use: 'css-loader'},
        },
        {
          test://\.scss$/,
          loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!ass-loader'},
        },
      ],
    },
    plugins: [
      new ExtractTextPlugin('bundle.css'),
    ],
  },
];

After yarn run start, when changing and saving index.js and index.scss, logs like compilation are played, but bundle.js and bundle.css have not been updated (checked in the browser and have not changed).
Also, the browser does not reload automatically.
US>Logs

I researched various things on the Internet and changed them, but it doesn't work well, perhaps because of the difference in version.I'd like someone to teach me.

javascript css npm webpack

2022-09-30 19:44

1 Answers

Self-Solving:
By moving index.html to public/, contentBase:publicDir, what you want to do was suddenly satisfied.The reason is a mystery...

2022-09-30 19:44

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656