Блог

Из-за некоторого обновления моя ранее работавшая настройка больше не работает должным образом. При запуске yarn start WDS будет искать изменения в моих файлах и вносить правильные обновления с первого раза, но любые другие изменения в файле не будут отправлены в браузер, даже если WDS признает изменение файла. Вот моя текущая конфигурация

 const path = require('path');
const merge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');

require('babel-polyfill');

const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
  app: path.join(__dirname, '/Zeus/src'),
  build: path.join(__dirname, '/Zeus/dist'),
};

const common = {
  entry: {
    index: [
      'babel-polyfill',
      PATHS.app,
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx', '.scss'],
  },
  output: {
    path: PATHS.build,
    publicPath: '/dist/',
    filename: '[name].js',
    chunkFilename: '[id].[chunkhash].js',
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        include: PATHS.app,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /flickity/,
        loader: 'imports-loader?define=>falseamp;this=>window',
      }
    ],
  },
  plugins: [
    new WebpackChunkHash({algorithm: 'md5'}) // 'md5' is default value
  ],
};

const extractSass = new ExtractTextPlugin({
  filename: '[name].css',
  disable: process.env.NODE_ENV === 'development',
});

//
// Developmemt configuration
//
if (TARGET === 'start' || !TARGET) {
  module.exports = merge(common, {
    devtool: 'eval-source-map',
    devServer: {
      contentBase: path.join(__dirname, '/Zeus'),
      historyApiFallback: true,
      hot: true,
      // hotOnly: true,
      clientLogLevel: 'info',
      // stats: 'errors-only',
      host: '0.0.0.0',
      port: 8080,
    },
    module: {
      rules: [{
        test: /.scss$/,
        use: extractSass.extract({
          use: [{
            loader: 'css-loader',
          }, {
            loader: 'sass-loader',
          }],
          // use style-loader in development
          fallback: 'style-loader',
        }),
      }],
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.optimize.ModuleConcatenationPlugin(),
      extractSass,
    ],
  });
}
  

Обычно это означает, что я отменяю процесс и запускаю его снова. Что работает, но, очевидно, не очень удобно.

[править] Чтобы включить мою структуру каталога, следует:

 /
  webpack.config.js
  /Zeus
    /dist
    /src
      index.js
  

Я использую webpack: ^4.29.6 .

[редактировать, чтобы включить файл pck]

 {
  "name": "zeus",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --progress",
    "start": "webpack-dev-server --debug",
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-stage-1": "^7.0.0",
    "@babel/preset-stage-3": "^7.0.0",
    "@babel/register": "^7.0.0",
    "autoprefixer-loader": "^3.2.0",
    "axios-mock-adapter": "^1.16.0",
    "babel-eslint": "10",
    "babel-loader": "^8.0.5",
    "babel-polyfill": "^6.26.0",
    "chai": "^4.2.0",
    "chai-jquery": "^2.1.0",
    "css-loader": "^2.1.0",
    "enhanced-resolve": "^4.1.0",
    "enzyme": "^3.9.0",
    "es6-promise-promise": "^1.0.0",
    "eslint": "5.x",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^3.0.1",
    "imports-loader": "^0.8.0",
    "install": "^0.12.2",
    "istanbul": "1.0.0-alpha.2",
    "jquery": "^3.3.1",
    "jsdom": "^14.0.0",
    "mocha": "^6.0.2",
    "mock-local-storage": "^1.1.8",
    "nock": "^10.0.6",
    "node-sass": "^4.11.0",
    "offline-plugin": "^5.0.6",
    "phantomjs": "^2.1.7",
    "plato": "^1.7.0",
    "react-addons-test-utils": "^15.6.2",
    "redux-mock-store": "^1.5.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "tapable": "^1.1.1",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "url-loader": "^1.1.2",
    "watchpack": "^1.6.0",
    "webpack": "^4.29.6",
    "webpack-chunk-hash": "^0.6.0",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1",
    "webpack-merge": "^4.2.1",
    "webpack-sources": "^1.3.0"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.3.4",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-syntax-import-meta": "^7.2.0",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "@babel/plugin-transform-runtime": "^7.3.4",
    "axios": "^0.18.0",
    "babel-preset-stage-1": "^6.24.1",
    "enzyme-adapter-react-16": "^1.10.0",
    "es6-promise": "^4.2.6",
    "flickity": "^2.2.0",
    "history": "^4.7.2",
    "isomorphic-fetch": "^2.2.1",
    "jest": "^24.3.1",
    "lodash": "^4.17.11",
    "moment": "^2.24.0",
    "moxios": "^0.4.0",
    "npm-check-updates": "^3.1.7",
    "prop-types": "^15.7.2",
    "query-string": "^6.2.0",
    "react": "^16.8.3",
    "react-async-script": "^1.0.0",
    "react-async-script-loader": "^0.3.0",
    "react-autocomplete": "^1.8.1",
    "react-dom": "^16.8.3",
    "react-ga": "^2.5.7",
    "react-google-login": "^5.0.2",
    "react-infinite-scroller": "^1.2.4",
    "react-loadable": "^5.5.0",
    "react-masonry-component": "^6.2.1",
    "react-modal": "^3.8.1",
    "react-redux": "^7.0.1",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
    "react-router-scroll": "^0.4.4",
    "react-sticky": "^6.0.3",
    "react-waypoint": "^9.0.0",
    "redux": "^4.0.1",
    "redux-form": "^8.1.0",
    "redux-promise": "^0.6.0",
    "redux-saga": "^1.0.2",
    "redux-storage": "^4.1.2",
    "redux-thunk": "^2.3.0"
  }
}