Question

我想使用webpack，以便它将/ src / app文件夹中的所有.scss文件自动编译为单个.css文件，而无需我明确指出所有.scss文件/将它们导入。

我正在尝试使用ExtractTextPlugin来执行此操作，但是它似乎无法正常工作。我是否需要提供更具体的切入点？我的装载机配置不正确吗？还是还有其他问题？谢谢！

webpack.config.js：

package.json

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

const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");

const config = {
  devtool: 'inline-source-map',
  entry: [
    "babel-polyfill",
    SRC_DIR + "/app/index.js"
    SRC_DIR + "/app/"
  ],
  target: 'web',
  output: {
    path: DIST_DIR + "/app/",
    filename: "bundle.js",
    publicPath: "/app/"
  },
  devServer: {
    contentBase: './dist',
    historyApiFallback: true,
    hot: true,
    proxy: {
      '/api': {
        target: 'http://localhost:5001',
        secure: false,
      },
    }
  },
  plugins: [
    new ExtractTextPlugin({filename: "foo.css", allChunks: true})
  ],
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          failOnWarning: false,
          failOnError: true
        }
      },
      {
        test: /\.js$/,
        include: SRC_DIR,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'stage-2']
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: 'css-loader?importLoaders=1',
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', {
          loader: 'image-webpack-loader',
          query: {
            mozjpeg: {
              progressive: true,
            },
            gifsicle: {
              interlaced: false,
            },
            optipng: {
              optimizationLevel: 7,
            },
            pngquant: {
              quality: '75-90',
              speed: 3,
            },
          },
        }],
        exclude: path.resolve(__dirname, "node_modules"),
        include: __dirname,
      },
      {
        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        // loader: "url?limit=10000"
        use: "url-loader"
      },
      {
        test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
        use: 'file-loader'
      },
    ]
  },
};

module.exports = config;

Answer 1

无需我明确指向所有.scss文件/ 导入它们。

您不能这样做，webpack不像gulp或其他任务运行器，您只能指向模式，它将对它们应用转换。

Webpack可用于依赖图，这些图将从您的入口点开始。在每个入口点，它读取依赖关系，并应用为每个文件扩展名指定的那些加载程序。如果将Webpack导入到依赖关系图的任何文件中，Webpack只会知道该文件的存在。

如果您想以您描述的方式转换CSS，我建议您转向更多的任务运行程序库，例如gulp。

使用Webpack编译SASS文件

1 个答案: