使用Webpack 2和extract-text-webpack-plugin [英] Using Webpack 2 and extract-text-webpack-plugin

问题描述

我正在使用带有Webpack 2.2.1的extract-text-webpack-plugin 2.0.0-rc.3，并且在运行构建时遇到此错误：

I'm using extract-text-webpack-plugin 2.0.0-rc.3 with Webpack 2.2.1 and am getting this error when running the build:

/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：

Here is my 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;
})();

当我删除新的ExtractTextPlugin（style.css）从插件数组构建运行正常，但不创建 style.css 。

When I remove new ExtractTextPlugin("style.css") from the plugins array the build runs fine, but doesn't create style.css.

如果我添加 allChunks：true 选项，则错误变为：

If I add the allChunks: true option the error becomes this:

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

推荐答案

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

In case you are writing style rules in .vue file or seprate .scss file, with below webpack configurations you can achieve what you're searching for:

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安装了这些模块/装载机：

Just make sure that you have installed these modules/loaders via NPM:

• css-loader


• sass-loade r


• node-sass


• extract-text-webpack-plugin

• css-loader
• sass-loader
• node-sass
• extract-text-webpack-plugin

这篇关于使用Webpack 2和extract-text-webpack-plugin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！