Webpackソースマップの速度の問題

Question

Webpackを実装して、すべてのプロジェクト資産をバンドルします。それはうまくいっているが、私の.scssファイルから参照されているイメージなどのファイルをリンクしているので、resolve-css-loaderがファイルを並べ替えて正しく配置するためには、ソースマップを有効にする必要があります。ソースマップの生成はバンドルのコンパイル速度をあまりにも高くしています。とにかくそれをスピードアップする方法はありますか？

マイwebpack.config.jsファイル：

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

module.exports = { 
    entry: { 
    'js': './app/assets/scripts/application.js', 
    'css': './app/assets/styles/application.scss' 
    }, 
    output: { 
    path: path.resolve(__dirname, 'public', 'assets'), 
    filename: '[name]/application.js', 
    publicPath: '/assets/' 
    }, 
    watch: true, 
    module: { 
    rules: [ 
     { 
     test: /\.s[ac]ss$/, 
     use: ExtractTextPlugin.extract({ 
      use: ['css-loader', 'resolve-url-loader', 'sass-loader?sourceMap'] 
     }) 
     }, 
     { 
     test: /\.svg$/, 
     use: 'file-loader?name=svg/[name].[ext]' 
     }, 
     { 
     test: /\.(gif|png|jpe?g)$/, 
     use: 'file-loader?name=img/[name].[ext]' 
     } 
     // { 
     // test: /\.css$/, 
     // use: ExtractTextPlugin.extract({ 
     //  use: 'css-loader' 
     // }) 
     // } 
    ] 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery' 
    }), 
    new ExtractTextPlugin('[name]/application.css') 
    ] 
}; 

また、私がtrueに時計を設定しているが、それはdoesnの; tは、すべての任意のファイルの変更を拾っているようです。なぜこれができますか？

誰でも私の設定で私を助けることができたら、私は感謝します。

おかげ

Answer 1

私はあなたがそう

devtool: 'cheap-module-eval-source-map',

にdevtoolを設定してみてくださいプラス生産ビルドを行うときにextract-text-webpack-pluginを使用する必要があるだけでなければならないのWebPACK 2または3を使用していると仮定しています、必要ありません開発中。しかし、私は完全な設定がわからないので、必要になるかもしれません。

に切り替えるとよいでしょう。私は1年以上前に切り替え、その時必要だったmixinやsass変数をサポートするpostcssプラグインを使用しました。