Webpack 不会编译 js 文件

Question

在 cli 上运行 webpack --watch 后，所有文件都编译好了，一切正常！但是更新 webpack 后，它不会在 js 文件更改时触发 watch，而只会为 css 执行和导出。

我的 webpack 配置：

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

module.exports = {
    entry: [
      './client.js',
      './client/styles/main.scss'
    ],
    output: {
        path: './build',
        publicPath: '/public/js/',
        filename: '[name].js'
    },
    resolve: {
      extensions: ['', '.js'],
      alias: {
        'styles': __dirname + '/client/styles',
        'components': __dirname + '/client/scripts/components',
        'actions': __dirname + '/client/scripts/actions',
        'stores': __dirname + '/client/scripts/stores',
        'constants': __dirname + '/client/scripts/constants',
        'mixins': __dirname + '/client/scripts/mixins',
        'configs': __dirname + '/client/scripts/configs',
        'icon': 'react-fa'
      }
    },
    module: {
      loaders: [
        { test: /\.css$/, loader: 'style!css' },
        { test: /\.js$/, exclude: /node_modules/, loader: require.resolve('babel-loader') },
        { test: /\.json$/, loader: 'json-loader'},
        { test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/, loader: 'url-loader?limit=8192' },
        { test: /\.scss$/,
          loader: ExtractTextPlugin.extract('style-loader',
            'css!sass?outputStyle=expanded&' +
              "includePaths[]=" +
                (path.resolve(__dirname, "./node_modules"))
          )
        },
      ]
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          "windows.jQuery": "jquery"
      }),
      new ExtractTextPlugin("[name].css", {allChunks: true}),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.OldWatchingPlugin()
    ],
    stats: {
      colors: true,
      reasons: true
    },
    devtool: 'source-map',
    watch: true,
    keepalive: true,
    debug: true,
    cache: true,
};

我的输出：

Version: webpack 1.9.6
Time: 4153ms
                                 Asset      Size  Chunks             Chunk Names
  f4769f9bdb7466be65088239c12046d1.eot   20.1 kB          [emitted]
  89889688147bd7575d6327160d64e760.svg    109 kB          [emitted]
  e18bbf611f2a2e43afc071aa2f4e1512.ttf   45.4 kB          [emitted]
 fa2772327f55d8198301fdb8bcfc8158.woff   23.4 kB          [emitted]
448c34a56d699c29117adc64c43affeb.woff2     18 kB          [emitted]
                               main.js   1.11 MB       0  [emitted]  main
                              main.css    164 kB       0  [emitted]  main
                           main.js.map   1.31 MB       0  [emitted]  main
                          main.css.map  85 bytes       0  [emitted]  main
   [0] multi main 40 bytes {0} [built]
    + 249 hidden modules
Child extract-text-webpack-plugin:
                                     Asset     Size  Chunks             Chunk Names
      f4769f9bdb7466be65088239c12046d1.eot  20.1 kB          [emitted]
      89889688147bd7575d6327160d64e760.svg   109 kB          [emitted]
      e18bbf611f2a2e43afc071aa2f4e1512.ttf  45.4 kB          [emitted]
     fa2772327f55d8198301fdb8bcfc8158.woff  23.4 kB          [emitted]
    448c34a56d699c29117adc64c43affeb.woff2    18 kB          [emitted]
        + 7 hidden modules

JS 更改时不会创建其他输出。 .....

 file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_pagination.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_nav-divider.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_progress-bar.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_border-radius.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_gradients.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_center-block.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss' }
{ file: '/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid.scss' }

CSS 更改后。

Answer 1

您的 JS 加载器的配置与其他的不同；如果你改变它会起作用吗

{ test: /\.js$/, exclude: /node_modules/, loader: require.resolve('babel-loader') }

到

{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }