mzgoddard / hard-source-webpack-plugin

https://www.npmjs.com/package/hard-source-webpack-plugin
ISC License
2.71k stars 160 forks source link

Getting infinite hot reloading with this plugin enabled #9

Closed janpaul123 closed 8 years ago

janpaul123 commented 8 years ago

And not when commenting out this plugin.

screen shot 2016-08-24 at 17 00 32

This is essentially what my config looks like (after some transformations):

const autoprefixer = require('autoprefixer');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const path = require('path');
const webpack = require('webpack');

const config = {
  plugins: [
    new CircularDependencyPlugin({
      exclude: /node_modules\/url-parse/,
    }),
    new ManifestPlugin(),
    new HardSourceWebpackPlugin({
      cacheDirectory: path.resolve('./.hard-source-cache'),
      environmentPaths: {
        files: [
          'package.json',
          '.webpack.config.base.js',
          '.webpack.config.dev.js',
          '.webpack.config.static.js'
        ],
      },
    }),
    new webpack.DefinePlugin({
      '__DEV__': true,
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new JasmineWebpackPlugin({
      htmlOptions: {
        chunks: ['tests'],
        filename: 'index.html',
      },
    }),
  ],
  devtool: 'eval-source-map',
  recordsPath: path.resolve('./public/client/records.json'), // For HardSourceWebpackPlugin to work.
  devServer: { hot: true, host: '0.0.0.0' },
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'client/components'),
        ],
        loaders: ['react-hot'],
      },
      {
        test: /\.js$/,
        include: [
          path.resolve('./client'),
          path.resolve('./node_modules/twkb'), // Because of https://github.com/TWKB/twkb.js/commit/80ecfee82aa9a3259bb67627a03c2c47122b26a5#commitcomment-17942804
        ],
        exclude: [
          /libraries/,
        ],
        loader: 'babel',
        query: {
          cacheDirectory: '.babel-cache',
          plugins: [],
        },
      },
      {
        test: /\.less$/,
        include: path.resolve('./client'),
        loaders: [
          'style', // Inject into HTML (bundles it in JS).
          'css?localIdentName=[path][name]--[local]--[hash:base64:10]', // Resolves url() and :local().
          'postcss-loader', // Autoprefixer (see below at `postcss()`).
          'less', // LESS preprocessor.
        ],
      },
      {
        test: /\.json$/,
        include: path.resolve('./client'),
        loaders: [
          'json-loader',
        ],
      },
      {
        test: /\.(jpe?g|png|gif)$/i,
        include: path.resolve('./client'),
        loaders: [
          'url?limit=10000', // Inline small images, otherwise create file.
          'img?progressive=true', // Minify images.
        ],
      },
      {
        test: /\.geojson$/, // GeoJSON fixtures
        loader: 'json',
      },
      {
        test: /\.svg$/,
        loader: 'raw',
      },
    ],
  },
  postcss() {
    return [autoprefixer];
  },
  entry: {
    build: [
      'webpack/hot/dev-server'
      'webpack-dev-server/client?http://localhost:8080',
      'client/build',
    ],
    tests: ['client/tests'],
    happo: ['client/happo'],
  },
  resolve: {
    alias: {
      client: path.resolve('./client'),
    },
    modulesDirectories: [
      'node_modules',
    ],
    extensions: [ // Default extensions.
      '',
      '.js',
    ],
  },
  output: {
    path: 'public/client', // In case this is run without webpack-dev-server.
    publicPath: 'http://localhost:8080/',
    filename: '[name].js',
  },
};
mzgoddard commented 8 years ago

Can you post your package.json? Or at least the dependency versions?

On Wednesday, August 24, 2016, Jan Paul Posma notifications@github.com wrote:

And not when commenting out this plugin.

[image: screen shot 2016-08-24 at 17 00 32] https://cloud.githubusercontent.com/assets/177461/17952166/dcffc4a4-6a1c-11e6-9a46-41488d02638f.png

This is essentially what my config looks like (after some transformations):

const autoprefixer = require('autoprefixer');const CircularDependencyPlugin = require('circular-dependency-plugin');const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');const ManifestPlugin = require('webpack-manifest-plugin');const path = require('path');const webpack = require('webpack'); const config = { plugins: [ new CircularDependencyPlugin({ exclude: /node_modules\/url-parse/, }), new ManifestPlugin(), new HardSourceWebpackPlugin({ cacheDirectory: path.resolve('./.hard-source-cache'), environmentPaths: { files: [ 'package.json', '.webpack.config.base.js', '.webpack.config.dev.js', '.webpack.config.static.js' ], }, }), new webpack.DefinePlugin({ 'DEV': true, }), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new JasmineWebpackPlugin({ htmlOptions: { chunks: ['tests'], filename: 'index.html', }, }), ], devtool: 'eval-source-map', recordsPath: path.resolve('./public/client/records.json'), // For HardSourceWebpackPlugin to work. devServer: { hot: true, host: '0.0.0.0' }, module: { loaders: [ { test: /.js$/, include: [ path.resolve(__dirname, 'client/components'), ], loaders: ['react-hot'], }, { test: /.js$/, include: [ path.resolve('./client'), path.resolve('./node_modules/twkb'), // Because of https://github.com/TWKB/twkb.js/commit/80ecfee82aa9a3259bb67627a03c2c47122b26a5#commitcomment-17942804 ], exclude: [ /libraries/, ], loader: 'babel', query: { cacheDirectory: '.babel-cache', plugins: [], }, }, { test: /.less$/, include: path.resolve('./client'), loaders: [ 'style', // Inject into HTML (bundles it in JS). 'css?localIdentName=[path][name]--[local]--[hash:base64:10]', // Resolves url() and :local(). 'postcss-loader', // Autoprefixer (see below at postcss()). 'less', // LESS preprocessor. ], }, { test: /.json$/, include: path.resolve('./client'), loaders: [ 'json-loader', ], }, { test: /.(jpe?g|png|gif)$/i, include: path.resolve('./client'), loaders: [ 'url?limit=10000', // Inline small images, otherwise create file. 'img?progressive=true', // Minify images. ], }, { test: /.geojson$/, // GeoJSON fixtures loader: 'json', }, { test: /.svg$/, loader: 'raw', }, ], }, postcss() { return [autoprefixer]; }, entry: { build: [ 'webpack/hot/dev-server' 'webpack-dev-server/client?http://localhost:8080', 'client/build', ], tests: ['client/tests'], happo: ['client/happo'], }, resolve: { alias: { client: path.resolve('./client'), }, modulesDirectories: [ 'node_modules', ], extensions: [ // Default extensions. '', '.js', ], }, output: { path: 'public/client', // In case this is run without webpack-dev-server. publicPath: 'http://localhost:8080/', filename: '[name].js', }, };```

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/mzgoddard/hard-source-webpack-plugin/issues/9, or mute the thread https://github.com/notifications/unsubscribe-auth/AAy3EoA6ixse0h8Dt3OuoXe0w03cOQSgks5qjNw7gaJpZM4JsktM .

janpaul123 commented 8 years ago

Ah yes:

{
  "name": "core",
  "version": "0.1.0",
  "engines": {
    "node": "5.11.0",
    "npm": "3.8.7"
  },
  "private": true,
  "dependencies": {
    "accounting": "^0.4.1",
    "ampersand-app": "^2.0.0",
    "ampersand-collection": "^2.0.0",
    "ampersand-collection-view": "^2.0.1",
    "ampersand-dom": "^1.4.0",
    "ampersand-events": "^2.0.2",
    "ampersand-filtered-subcollection": "^3.0.0",
    "ampersand-model": "^8.0.0",
    "ampersand-rest-collection": "^6.0.0",
    "ampersand-router": "^4.0.0",
    "ampersand-state": "^5.0.1",
    "ampersand-view": "^10.0.0",
    "ampersand-view-switcher": "^2.0.0",
    "async": "^2.0.0",
    "autoprefixer": "^6.3.6",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-object-rest-spread": "^6.5.0",
    "babel-plugin-transform-react-display-name": "^6.5.0",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.3.13",
    "circular-dependency-plugin": "^1.1.0",
    "classnames": "^2.2.5",
    "closest": "0.0.1",
    "clusterfck": "^0.6.0",
    "compression-webpack-plugin": "^0.3.1",
    "css-loader": "^0.24.0",
    "dom4": "git://github.com/remix/dom4.git#07edb7646999f85025b94c7fdcf42db9926624f2",
    "domify": "^1.3.3",
    "domready": "^1.0.8",
    "events-mixin": "^1.2.0",
    "file-loader": "^0.9.0",
    "get-object-path": "git://github.com/azer/get-object-path.git#cc61f964a944783dd5d6d1238039e31e6399775c",
    "hard-source-webpack-plugin": "0.0.22",
    "img-loader": "^1.2.2",
    "json-loader": "^0.5.4",
    "keen-js": "^3.2.4",
    "keymirror": "^0.1.1",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "lodash": "^4.13.1",
    "natural-compare-lite": "^1.4.0",
    "node-xhr": "^1.0.5",
    "polyline-encoded": "0.0.8",
    "postcss-loader": "^0.10.0",
    "promise-polyfill": "^6.0.0",
    "raven-js": "^3.0.4",
    "raw-loader": "^0.5.1",
    "rbush": "^2.0.1",
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "react-motion": "^0.4.4",
    "set-object-path": "git://github.com/azer/set-object-path.git#0da0bd67b8fe4951f2b44171c700101eb534f87c",
    "shallowequal": "^0.2.2",
    "stats-webpack-plugin": "^0.4.0",
    "style-loader": "^0.13.1",
    "tether": "^1.3.2",
    "tinycolor2": "^1.1.2",
    "tinycon": "tommoor/tinycon",
    "turf-bearing": "^3.0.1",
    "turf-destination": "^3.0.5",
    "turf-distance": "^3.0.5",
    "turf-point": "^2.0.1",
    "turf-within": "^3.0.5",
    "twkb": "git://github.com/TWKB/twkb.js.git#7c49ce11556f6f0d3134d942d3b08256cad03e1f",
    "url-loader": "^0.5.7",
    "uuid": "^2.0.2",
    "webpack": "^1.13.0",
    "webpack-manifest-plugin": "^1.0.1",
    "webpack-visualizer-plugin": "^0.1.5",
    "xhr": "^2.0.4"
  },
  "devDependencies": {
    "babel-cli": "^6.4.5",
    "babel-eslint": "^6.0.4",
    "babel-plugin-istanbul": "^2.0.0",
    "codecov": "^1.0.1",
    "colors": "^1.1.2",
    "eslint": "^2.4.0",
    "eslint-config-airbnb": "^9.0.0",
    "eslint-import-resolver-webpack": "^0.5.1",
    "eslint-plugin-import": "^1.7.0",
    "eslint-plugin-jsx-a11y": "^1.2.0",
    "eslint-plugin-react": "^5.0.1",
    "heroku-client": "^2.4.0",
    "jasmine-ajax": "^3.2.0",
    "jasmine-core": "^2.4.1",
    "jasmine-webpack-plugin": "git://github.com/iredelmeier/jasmine-webpack-plugin.git#13982ff0f008abecd463a39423994604280e4491",
    "karma": "1.2.0",
    "karma-browserstack-launcher": "^1.0.0",
    "karma-coverage": "^1.0.0",
    "karma-firefox-launcher": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "minimist": "^1.2.0",
    "open": "0.0.5",
    "react-addons-test-utils": "^15.0.2",
    "react-hot-loader": "^1.3.0",
    "readline-sync": "^1.2.22",
    "shelljs": "0.5.3",
    "simple-statistics": "^2.0.0-beta1",
    "webpack-dev-server": "^1.14.1"
  }
}

Also, thank you so much for this plugin! This is already bringing down the build times in CI from ~30 secs to ~5 secs.

janpaul123 commented 8 years ago

If you have no idea I can help by removing some more stuff from the webpack config to try to narrow it down. Would have to do that this weekend though.

mzgoddard commented 8 years ago

@janpaul123 One thing I'd check is if you have any context dependencies that contain the cache directory. Any loaders or require.contexts that point at the cache directory or a containing directory will lead to rebuilds when the cache is written out. (For require.context it doesn't matter if you use a regular expression to exclude folders or files, if the root of the context contains the cache it'll be triggered.)

If this is the problem you'll either need to rework your context dependencies or move the cache directory outside of your contexts. Make sure to consider your recordsPath. HardSource currently writes out the records to recordsPath like webpack-dev-server.

This is likely the issue you are experiencing. I doubt there is something hard-source is currently doing itself to cause the rebuilds. Instead its probably a side effect of writing out the cache.

janpaul123 commented 8 years ago

Ah yes, you're absolutely right, there was one require.context statement that accidentally pointed to the root of the project, which contains the cache directory. Thanks for your quick help, much appreciated! And thanks again for this great piece of software! ☺️

mzgoddard commented 8 years ago

@janpaul123 Glad I could help in both senses.