Using Webpack 2 and extract-text-webpack-plugin

Question

I use extract-text-webpack-plugin 2.0.0-rc.3 with Webpack 2.2.1 and get this error when starting 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 new ExtractTextPlugin("style.css") from the plugins array, the assembly is fine, but does not create style.css .

If I add the allChunks: true parameter, the error will be as follows:

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

Answer 1

If you write style rules in a .vue or seprate .scss .scss , with the below .scss configurations you can achieve what you are looking 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 you install these modules / bootloaders through NPM:

• CSS loader
• bicker-loader
• node-sass
• text extract webpack plugin