使用 Webpack 2 和 extract-text-webpack-plugin

Question

我将 extract-text-webpack-plugin 2.0.0-rc.3 与 Webpack 2.2.1 一起使用，并且在运行构建时遇到此错误：

/node_modules/extract-text-webpack-plugin/index.js:259
var shouldExtract = !!(options.allChunks || chunk.isInitial());
                                                  ^
TypeError: chunk.isInitial is not a function

这是我的 webpack.config.js：

'use strict';
const argv = require('yargs').argv;
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');

module.exports = (function () {
  let config = {
    entry   : './' + process.env.npm_package_config_paths_source + '/main.js',
    output  : {
      filename : 'main.js'
    },
    watch   : !!argv.watch,
    vue     : {
      loaders : {
        js   : 'babel-loader',
        // Create separate CSS file to prevent unstyled content
        sass : ExtractTextPlugin.extract("css!sass?sourceMap") // requires `devtool: "#source-map"`
      }
    },
    module  : {
      rules : [
        {
          test    : /\.js$/,
          use     : 'babel-loader',
          exclude : '/node_modules/'
        },
        {
          test    : /\.vue$/,
          use     : 'vue-loader',
          options : {
            loaders : {
              'scss' : 'vue-style-loader!css-loader!sass-loader',
              'sass' : 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
            },
          }
        }
      ]
    },
    plugins : [
      new webpack.DefinePlugin({
        'process.env' : {
          npm_package_config_paths_source : '"' + process.env.npm_package_config_paths_source + '"'
        }
      }),
      new ExtractTextPlugin("style.css")
    ],
    resolve : {
      alias : {
        'vue$' : 'vue/dist/vue.common.js'
      }
    },
    babel   : {
      "presets"  : ["es2015", "stage-2"],
      "comments" : false,
      "env"      : {
        "test" : {
          "plugins" : ["istanbul"]
        }
      }
    },
    devtool : "#source-map" // #eval-source-map is faster but not compatible with ExtractTextPlugin
  };

  if (process.env.NODE_ENV === 'production') {
    config.plugins = [
      // short-circuits all Vue.js warning code
      new webpack.DefinePlugin({
        'process.env' : {
          NODE_ENV                        : '"production"',
          npm_package_config_paths_source : '"' + process.env.npm_package_config_paths_source + '"'
        }
      }),
      // minify with dead-code elimination
      new webpack.optimize.UglifyJsPlugin(),
      new ExtractTextPlugin("style.css")
    ];
    config.devtool = "#source-map";
  }

  return config;
})();

当我从 plugins 数组中删除 new ExtractTextPlugin("style.css") 时，构建运行正常，但不会创建 style.css。

如果我添加 allChunks: true 选项，错误会变成这样：

/node_modules/webpack/lib/Chunk.js:80
return this.entrypoints.length > 0;
                       ^
TypeError: Cannot read property 'length' of undefined

Answer 1

如果您在 .vue 文件或单独的 .scss 文件中编写样式规则，使用以下 webpack 配置可以实现您要搜索的内容：

webpack.confi.js：

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
        ....
        ....
module.exports = {
      ....
      ....
      module: {
          rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                  loaders: {
                    'scss': ExtractTextPlugin.extract('css-loader!sass-loader'),
                    'sass': ExtractTextPlugin.extract('css-loader!sass-loader?indentedSyntax')
                  }
                }
             },
              ....
              ....
              {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css-loader!sass-loader')
              }
              ....
              ....
          ] // rules end
      }, // module end
      plugins: [
          new ExtractTextPlugin('style.css')
      ],
      ....
  }

只要确保你已经通过 NPM 安装了这些模块/加载器：

• css 加载器
• sass 加载器
• 节点-sass
• extract-text-webpack-plugin