Using Webpack 2 and extract-text-webpack-plugin

问题:

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 

回答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

文章来源: Using Webpack 2 and extract-text-webpack-plugin