Webpack 4：提取文本Webpack插件错误

Question

Please help me with the problem when building the project. I'm using webpack 4.17.2, and when I try to run the build, I'm constantly getting an error. As you can see from the configuration files, I declared the plug-in quite correctly, but this error goes out again and again

Cause:

ERROR in Module build failed (from ./node_modules/extract-text-webpack-plugin/dist/loader.js): Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin

There is configs:

utils.js

const fs = require('fs');
const path = require('path');

module.exports = {
  parseVersion,
  root,
  isExternalLib
};

const parseString = require('xml2js').parseString;
// return the version number from `pom.xml` file
function parseVersion() {
  let version = null;
  const pomXml = fs.readFileSync(path.resolve(__dirname, '../../asterisk-prime/pom.xml'), 'utf8');
  parseString(pomXml, (err, result) => {
    if (err) {
      throw new Error('Failed to parse pom.xml: ' + err);
    }
    if (result.project.version && result.project.version[0]) {
      version = result.project.version[0];
    } else if (result.project.parent && result.project.parent[0] && result.project.parent[0].version && result.project.parent[0].version[0]) {
      version = result.project.parent[0].version[0];
    }
  });
  if (version === null) {
    throw new Error('pom.xml is malformed. No version is defined');
  }
  return version;
}

const _root = path.resolve(__dirname, '..');

function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [_root].concat(args));
}

function isExternalLib(module, check = /node_modules/) {
  const req = module.userRequest;
  if (typeof req !== 'string') {
    return false;
  }
  return req.search(check) >= 0;
}

webpack.common.js

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const rxPaths = require('rxjs/_esm5/path-mapping');

const utils = require('./utils.js');

module.exports = (options) => ({
  resolve: {
    extensions: ['.ts', '.js'],
    modules: ['node_modules'],
    alias: {
      app: utils.root('src'),
      ...rxPaths()
    }
  },
  stats: {
    children: false
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          minimize: true,
          caseSensitive: true,
          removeAttributeQuotes: false,
          minifyJS: false,
          minifyCSS: false
        },
        exclude: ['./src/index.html']
      },
      {
        test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
        loader: 'file-loader',
        options: {
          digest: 'hex',
          hash: 'sha512',
          name: 'assets/[hash].[ext]'
        }
      },
      // Ignore warnings about System.import in Angular
      {test: /[\/\\]@angular[\/\\].+\.js$/, parser: {system: true}},
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: `'${options.env}'`,
        BUILD_TIMESTAMP: `'${new Date().getTime()}'`,
        VERSION: `'${utils.parseVersion()}'`,
        DEBUG_INFO_ENABLED: options.env === 'development',
        SERVER_API_URL: `''`
      }
    }),
    new CopyWebpackPlugin([
      { from: './src/assets/images', to: 'assets/images' },
      { from: './src/favicon.ico', to: 'favicon.ico' }
    ]),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      chunks: ['polyfills', 'global', 'main'],
      chunksSortMode: 'manual',
      inject: 'body'
    })
  ]
});

webpack.prod.js

const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const Visualizer = require('webpack-visualizer-plugin');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const path = require('path');

const utils = require('./utils.js');
const commonConfig = require('./webpack.common.js');

const ENV = 'production';
const sass = require('sass');
const extractSASS = new ExtractTextPlugin(`styles/[name]-sass.[hash].css`);
const extractCSS = new ExtractTextPlugin(`styles/[name].[hash].css`);

module.exports = webpackMerge(commonConfig({env: ENV}), {
  entry: {
    polyfills: './src/polyfills',
    global: './src/styles/global.scss',
    main: './src/main'
  },
  output: {
    path: utils.root('dist/asterisk'),
    filename: 'app/[name].[hash].bundle.js',
    chunkFilename: 'app/[id].[hash].chunk.js'
  },
  module: {
    rules: [
      {
        test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
        loader: '@ngtools/webpack'
      },
      {
        test: /\.scss$/,
        use: extractSASS.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'postcss-loader',
            {
              loader: 'sass-loader',
              options: {implementation: sass}
            }],
          publicPath: '../'
        }),
        exclude: /node_moduels/
      },
      {
        test: /\.css$/,
        use: extractCSS.extract({
          fallback: 'style-loader',
          use: ['css-loader'],
          publicPath: '../'
        }),
        exclude: /node_modules/
      }
    ]
  },
  optimization: {
    runtimeChunk: false,
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    },
    minimizer: [
      new TerserPlugin({
        parallel: true,
        cache: true,
        terserOptions: {
          ie8: false,
          // sourceMap: true, // Enable source maps. Please note that this will slow down the build
          compress: {
            dead_code: true,
            warnings: false,
            properties: true,
            drop_debugger: true,
            conditionals: true,
            booleans: true,
            loops: true,
            unused: true,
            toplevel: true,
            if_return: true,
            inline: true,
            join_vars: true
          },
          output: {
            comments: false,
            beautify: false,
            indent_level: 2
          }
        }
      })
    ]
  },
  plugins: [
    extractSASS,
    extractCSS,
    new MomentLocalesPlugin({
      localesToKeep: []
    }),
    new Visualizer({
      // Webpack statistics in dist folder
      filename: '../stats.html'
    }),
    new AngularCompilerPlugin({
      mainPath: utils.root('src/main.ts'),
      tsConfigPath: utils.root('tsconfig-aot.json'),
      sourceMap: true
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new WorkboxPlugin.GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
    })
  ],
  mode: 'production'
});

package.json

{
  "name": "asterisk-prime-ui",
  "version": "1.0.0",
  "main": "main.ts",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "cleanup": "rimraf dist/{aot,asterisk}",
    "clean-asterisk": "rimraf dist/asterisk/app/}",
    "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js",
    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "webpack:dev": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --watch-content-base --env.stats=minimal",
    "webpack:build:main": "npm run webpack -- --config webpack/webpack.dev.js --env.stats=normal",
    "webpack:prod": "npm run cleanup && npm run webpack:prod:main && npm run clean-asterisk",
    "webpack:prod:main": "npm run webpack -- --config webpack/webpack.prod.js --profile"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.7",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.7",
    "@angular/compiler": "^6.1.7",
    "@angular/core": "^6.1.7",
    "@angular/flex-layout": "^6.0.0-beta.18",
    "@angular/forms": "^6.1.7",
    "@angular/http": "^6.1.7",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "^6.1.7",
    "@angular/platform-browser-dynamic": "^6.1.7",
    "@angular/router": "^6.1.7",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "moment-locales-webpack-plugin": "^1.0.7",
    "net": "^1.0.2",
    "rxjs": "^6.3.2",
    "rxjs-compat": "^6.3.2",
    "swagger-ui": "^3.18.2",
    "terser-webpack-plugin": "^1.0.2",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.5",
    "@angular/compiler-cli": "^6.1.7",
    "@angular/language-service": "^6.1.7",
    "@babel/core": "^7.0.0",
    "@ngtools/webpack": "^6.1.5",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "@types/sockjs-client": "^1.1.0",
    "@types/stompjs": "^2.3.4",
    "angular-router-loader": "^0.8.5",
    "angular2-template-loader": "^0.6.2",
    "autoprefixer": "^9.1.5",
    "babel-loader": "^8.0.2",
    "browser-sync": "^2.24.7",
    "browser-sync-webpack-plugin": "^2.2.2",
    "cache-loader": "^1.2.2",
    "codelyzer": "~4.2.1",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "cssnano": "^4.1.0",
    "exports-loader": "^0.7.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^2.0.0",
    "fork-ts-checker-webpack-plugin": "^0.4.9",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.3",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lodash": "^4.17.10",
    "mini-css-extract-plugin": "^0.4.2",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^5.3.0",
    "protractor": "~5.4.0",
    "raw-loader": "^0.5.1",
    "resolve-url-loader": "^2.3.0",
    "sass": "^1.13.2",
    "sass-loader": "^7.1.0",
    "simple-notifier": "^1.1.0",
    "simple-progress-webpack-plugin": "^1.1.2",
    "sockjs-client": "^1.1.5",
    "stompjs": "^2.3.3",
    "style-loader": "^0.23.0",
    "sugarss": "^2.0.0",
    "thread-loader": "^1.2.0",
    "to-string-loader": "^1.1.5",
    "ts-loader": "^5.0.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "tslint-loader": "^3.6.0",
    "typescript": "^2.9.2",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-middleware": "^3.2.0",
    "webpack-dev-server": "^3.1.7",
    "webpack-merge": "^4.1.4",
    "webpack-notifier": "^1.6.0",
    "webpack-visualizer-plugin": "^0.1.11",
    "workbox-webpack-plugin": "^3.4.1",
    "write-file-webpack-plugin": "^4.4.0",
    "xml2js": "^0.4.19"
  }
}

I do not understand where my mistake is.Thank you all in advance for your help.

Answer 1

I just decided to give up webpack completely, because angular-cli uses the same webpack. Sorry for the pointless question.