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

Posted 2023-02-22

【中文标题】使用 Webpack 2 和 extract-text-webpack-plugin

【英文标题】：Using Webpack 2 and extract-text-webpack-plugin

【发布时间】：2017-07-11 15:15:29

【问题描述】：

我将 extract-text-webpack-plugin 2.0.0-rc.3 与 Webpack 2.2.1 一起使用，并且在运行构建时遇到此错误：

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

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

当我从 plugins 数组中删除 new ExtractTextPlugin("style.css") 时，构建运行正常，但不会创建 style.css。

如果我添加 allChunks: true 选项，错误会变成这样：

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

【问题讨论】：

我也面临同样的问题

下面发布的答案也可能对您有所帮助@EnugulaS

【参考方案1】：

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

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

css 加载器 sass 加载器 节点-sass extract-text-webpack-plugin