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

Question

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

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

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

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

Answer 1

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

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

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