Używanie wtyczki Webpack 2 i wtyczki text-webpack-plugin

Question

Używam wtyczki text-webpack-plugin 2.0.0-rc.3 z Webpack 2.2.1 i otrzymuję ten błąd podczas uruchamiania kompilacji:

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

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

Kiedy usunąć new ExtractTextPlugin("style.css") z tablicy plugins kompilacja przebiega w porządku, ale nie tworzy style.css.

Jeśli dodać opcję allChunks: true błąd staje się w ten sposób:

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

Answer 1

W przypadku piszesz reguły stylów w .vue pliku lub seprate .scss pliku, z poniżej konfiguracjach WebPACK można osiągnąć to, czego szukasz :

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

Tylko upewnij się, że masz zainstalowane te moduły/ładowarki poprzez KMP:

• css-ładowarka
• Sass-ładowarka
• node-Sass
• wyciąg-text-WebPACK -plugin