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')
  ]
};

另外，我已将watch设置为true但它似乎并没有完全取消任何文件更改。为什么会这样？

如果有人可以帮我解决我的配置，我将不胜感激。

由于

Answer 1

我假设您使用的是webpack 2或3.请尝试将postcss设置为

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

另外，在进行生产构建时，您只需要使用extract-text-webpack-plugin，而在开发过程中则不需要。但我不知道你的完整设置，所以你可能需要它。

您可能想尝试切换到{{3}}而不是sass。我在一年前切换并使用postcss插件来支持我当时需要的任何mixins或sass变量。

Webpack Sourcemap速度问题

1 个答案: