标签: extract-text-plugin

不确定我哪里出错了。这是我的用于捆绑客户端的 webpack.prod。但有些类名没有出现在我的 html 中

const path = require('path');
const webpack = require('webpack');
const dependencies = require('./package.json');
const ManifestPlugin = require('webpack-manifest-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const VENDOR_LIBS = [];
Object.entries(dependencies.dependencies).forEach(([key, value]) => {
  VENDOR_LIBS.push(key);
});

const BrowserConfig = {
  entry: {
    bundle: './src/index',
    vendor: VENDOR_LIBS,
  },
  output: {
    path: path.resolve('./dist'),
    publicPath: '/',
    filename: '[name].js',
    pathinfo: true,
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.scss', '.css'],
  },
  module: {
    rules: [
      {
        use: ['react-hot-loader/webpack', 'babel-loader'],
        test: /\.(js|jsx)$/,
        exclude: …

我正在尝试在我的React + Webpack项目上运行SASS编译并继续遇到此错误:

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin

遵循本教程中的指导原则:链接

这是我的webpack.config.js

有什么建议？

const debug = process.env.NODE_ENV !== "production";
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      },
      {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract('css!sass')
      } …

我需要在同一个项目输出中同时运行 LESS 和 SCSS 编译以分离 CSS 文件。

该项目基于 LESS，但现在在过渡阶段添加了 SCSS。

暂时不想更新webpack。Webpack 运行良好，但会生成 common.bundle.js 文件，但并未从这一包中提取 CSS。

它提取的其他块和新 SCSS 可以，但不是核心包文件 (common.bundle.js)。

我曾尝试更改 webpack.config.js 中的顺序，但这无济于事。我也看到了这个“多个实例”，但无法解决。

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");


module.exports = {
    devtool: "source-map",
    entry: {
        "login.bundle": "./dash/app/login.js",
        "summary.bundle": "./dash/app/summary.js",
        "metrics.bundle": "./dash/app/metrics.js",
        "market_share.bundle": "./dash/app/market_share.js",
        "broker.bundle": "./dash/app/broker.js",
        "event_studies_custom.bundle": "./dash/app/event_studies_custom.js",
        "case_studies.bundle": "./dash/app/case_studies.js",
        "home.bundle": "./dash/app/home.js"
    },
    output: {
        path: __dirname + '/dash/static/js',
        filename: "[name].js"
    },
    module: {
        loaders: [{
            test: require.resolve("jquery"), …

编辑:发布此问题后不久找到了解决方案.请参阅下面的我的答案

我有一个基于webpack 2的项目,它使用ExtractTextPlugin将SCSS/CSS拉出到一个单独的文件中.

另外,我在webpack(vendor和app)中定义了两个入口点,它们构建到我的JS包中.

出于某种原因,ExtractTextPlugin似乎打破了为应用程序包生成的源图app.js.map.如果我查看源图,它指向提取的CSS文件中的随机行,而不是JS.

查看源图文件本身,我只看到"sources"下面列出的CSS和SCSS文件(下面的简短示例):

{"version":3,"sources":["webpack:///webpack:///~/icon-font/package/styles/ficon.css","webpack:///webpack:///~/styles/package/styles/_imports.scss","webpack:///webpack:///~/styles/package/styles/includes/_variables.scss","webpack:///webpack:///~/styles/package/styles/includes/_mixins-utilities.scss", .....

但是,如果我ExtractTextPlugin在webpack配置中注释掉,我会在源代码中列出JS文件:

{"version":3,"sources":["webpack:///app-552b3935c142f5001484.js","webpack:///./src/lib/Globals.js","webpack:///./src/actions/AdActions.js", ....

所以不确定这里发生了什么......看起来有点像ExtractTextPlugin破坏或覆盖应用程序包的源图？

以下是我在webpack配置中定义的所有相关插件的方法:

{
  entry: {
    vendors: [
      'react',
      'react-dom',
      'react-redux',
    ],
    app: path.resolve(__dirname, './../src/client.js'),
  },
  output: {
    path: path.resolve(__dirname, './../dist/assets/'),
    filename: '[name]-[chunkhash].js',
    sourceMapFilename: '[name]-[chunkhash].js.map',
  },
  cache: false,
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(scss|sass|css)$/,
        loader: ExtractTextPlugin.extract({
          loader: [
            'css?sourceMap',
            'postcss-loader',
            'sass?sourceMap'
          ],
        }),
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.join(__dirname, '../src')], …

我的项目使用 webpack。我有两个入口点：第一个用于带有 CSS 模块的 CSS 文件，第二个用于全局 css 文件。Main.css 不是从项目中的任何文件导入的，所以我为它创建了一个特殊的入口点。

const extractStylesCss = new ExtractTextPlugin('styles.css');  

entry: {
    'main': ["./src/index.tsx"],
    'styles': "./src/main.css"
},
module: {
    loaders: [ 
        {
            test: /^.*\.css$/,
            exclude: [
                path.join(__dirname, 'src/main.css')
            ],

            loader: extractStylesCss.extract(
                "style",
                `css?modules&importLoaders=2&localIdentName=[local]___[hash:base64:5]___${pjson.version}!typed-css-modules!postcss?pack=pure&sourceMap=inline`
            )
        },
        {
            test: /main\.css$/,
            loader: extractStylesCss.extract('style', 'css!postcss?pack=pure&sourceMap=inline')
        },
    ]
},
plugins: [
    extractStylesCss
],
output: {
    path: path.join(__dirname, "/docs"),
    filename: "[name].js"
}

我只需要一个输出文件——styles.css。我知道 ExtractTextPlugin 为每个入口点生成一个包，但是否有可能获得一个文件？