webpack - Preload Webpack 插件和 Webpack 4 出错

Question

当我 web pack 的时候

--watch --config webpack.production.config.js --mode production

我有这个错误:

ERROR in TypeError: cb is not a function

• index.js:160 compilation.plugin [formation-front]/[preload-webpack-plugin]/index.js:160:9

• new Promise

• Hook.js:35 AsyncSeriesWaterfallHook.lazyCompileHook [as _promise] [formation-front]/[tapable]/lib/Hook.js:35:21

• index.js:673 [formation-front]/[html-webpack-plugin]/index.js:673:47

• index.js:178 Promise.resolve.then.then.then.then.then.then.html [formation-front]/[html-webpack-plugin]/index.js:178:18

这是我的 webpack.production.config.js :

'use strict';

// process.traceDeprecation = true

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const path = require('path');
const webpack = require('webpack');
const CompressionPlugin = require('compression-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
// const BundleAnalyzerPlugin            = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const entry = {
  app: [
    'babel-polyfill',
    path.resolve(__dirname, './client/app/app.js')
  ]
};

const output = {
  filename: '[name].[chunkhash].js',
  path: path.resolve(__dirname, 'dist'),
  publicPath: ''
};

const uglifyOptions = {
  cache: true,
  parallel: true,
  uglifyOptions: {
    ie8: false,
    ecma: 8,
    compress: {
      conditionals: true,
      unused: true,
      comparisons: true,
      sequences: true,
      dead_code: true,
      evaluate: true,
      if_return: true,
      join_vars: true
    },
    output: {
      comments: false,
      beautify: false
    },
    mangle: {
      reserved: ['$super', '$', 'exports', 'require', 'angular']
    },
    warnings: false
  }
};

const modules = {
  rules: [
    {
      test: /\.js$/,
      exclude: [/node_modules/, /app\/assets/],
      use: [
        {
          loader: 'ng-annotate-loader'
        },
        {
          loader: 'babel-loader'
        }
      ]
    },
    {
      test: /\.html$/,
      use: [{
        loader: 'raw-loader'
      }]
    },
    {
      test: /\.(sass|scss)$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: [
          {
            loader: "css-loader"
          },
          {
            loader: "sass-loader"
          }
        ]
      })
    },
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: [
          {
            loader: "css-loader"
          },
          {
            loader: "sass-loader"
          }
        ]
      })
    },
    {
      test: /\.(gif|png|jpe?g|svg)$/i,
      use: [
        {
          loader: 'file-loader',
          options: {
            hash: 'sha512',
            digest: 'hex',
            name: '[hash].[ext]'
          }
        },
        {
          loader: 'image-webpack-loader',
          options: {
            query: {
              mozjpeg: {
                progressive: true
              },
              optipng: {
                optimizationLevel: 7
              },
              gifsicle: {
                interlaced: 'true'
              },
              pngquant: {
                quality: '65-90',
                speed: '4'
              }
            }
          }
        }
      ]
    },
    {
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      use: [{
        loader: 'url-loader',
        options: {
          limit: '10000',
          mimetype: 'application/font-woff'
        }
      }]
    },
    {
      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      use: [{
        loader: 'file-loader',
      }]
    },
  ]
};

const plugins = [

  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
  }),

  new webpack.HashedModuleIdsPlugin(),

  new HtmlWebpackPlugin({
    hash: true,
    inject: true,
    template: 'client/index.html',
    minify: {
      collapseWhitespace: true,
      collapseInlineTagWhitespace: true,
      removeComments: true,
      removeRedundantAttributes: true
    }
  }),

  new PreloadWebpackPlugin({
    rel: 'preload',
    as: 'script',
    include: 'all',
    fileBlacklist: [/\.(css|map)$/, /client?.+/]
  }),

  new ScriptExtHtmlWebpackPlugin({
    defaultAttribute: 'defer'
  }),

  new HtmlWebpackInlineSourcePlugin(),

  new CompressionPlugin({
    asset: '[path].gz[query]',
    algorithm: 'gzip',
    test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
    threshold: 10240,
    minRatio: 0.8
  }),

  new ExtractTextPlugin({
    disable: true,
    filename: "[name].[contenthash].css"
  }),
];


try {
  module.exports = {
    mode: 'production',
    devtool: '',
    entry,
    output,
    module: modules, // Set to not conflict with module from module.exports,
    plugins,
    optimization: {
      namedModules: true, // NamedModulesPlugin()
      splitChunks: { // CommonsChunkPlugin()
        name: 'vendor',
        filename: 'vendor.[chunkhash].js',
        minChunks: 2,
        cacheGroups: {
          commons: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'all'
          }
        }
      },
      minimizer: [
        new UglifyJsPlugin(uglifyOptions)
      ],
      concatenateModules: true // ModuleConcatenationPlugin
    }
  };
} catch (err) {
  console.log(err);
}

这是我的 package.json :

{
  "name": "Argalis",
  "version": "0.0.1",
  "description": "-",
  "main": "index.js",
  "dependencies": {
    "@uirouter/angularjs": "^1.0.18",
    "angular": "^1.7.2",
    "angular-clock": "^0.7.0",
    "angular-file-saver": "^1.1.3",
    "angular-perfect-scrollbar-2": "^1.2.5",
    "angular-recaptcha": "^4.1.5",
    "angular-upload": "^1.0.13",
    "b64-to-blob": "^1.2.19",
    "babel-preset-es2015": "^6.24.1",
    "babel-register": "^6.23.0",
    "config": "^1.29.4",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "json-loader": "^0.5.4",
    "leaflet": "^1.3.1",
    "leaflet-routing-machine": "^3.2.8",
    "less": "^3.0.4",
    "lodash": "^4.17.10",
    "materialize-css": "^0.100.2",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.21",
    "node-sass": "^4.9.0",
    "node-uuid": "^1.4.7",
    "postcss-loader": "^2.1.5",
    "required-loader": "^1.3.16",
    "uid-safe": "^2.1.3",
    "underscore": "^1.9.1",
    "webpack-file-preprocessor-plugin": "0.0.1",
    "yarn-upgrade-all": "^0.3.0"
  },
  "devDependencies": {
    "angular-jwt": "^0.1.10",
    "angular-materialize": "^0.2.1",
    "angular-mocks": "^1.7.2",
    "angular-remove-di-loaders": "^1.0.4",
    "autoprefixer": "^8.6.3",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.5",
    "babel-loader": "^7.1.4",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-async-to-generator": "^6.16.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-polyfill": "^6.7.4",
    "babel-preset-env": "^1.7.0",
    "babel-runtime": "^6.6.1",
    "browser-sync": "^2.24.5",
    "chai": "^4.1.2",
    "compression-webpack-plugin": "^1.1.6",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.28.11",
    "eslint": "^5.0.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-config-angular": "^0.5.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-angular": "^3.3.0",
    "eslint-plugin-async": "^0.1.1",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.10.0",
    "extract-text-webpack-plugin": "^4.0.0-alpha.0",
    "file-loader": "^1.1.11",
    "font-awesome-webpack": "0.0.5-beta.2",
    "fs-walk": "0.0.2",
    "gulp": "^4.0.0",
    "gulp-rename": "^1.3.0",
    "gulp-template": "^5.0.0",
    "gulp-util": "^3.0.7",
    "html-webpack-inline-source-plugin": "^0.0.10",
    "html-webpack-plugin": "^3.2.0",
    "htmlhint-loader": "^1.3.1",
    "image-webpack-loader": "^4.3.1",
    "imports-loader": "^0.8.0",
    "karma": "^2.0.4",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-mocha": "^1.1.1",
    "karma-mocha-reporter": "^2.2.0",
    "karma-sourcemap-loader": "^0.3.4",
    "karma-webpack": "^3.0.0",
    "mocha": "^5.2.0",
    "ng-annotate-loader": "0.6.1",
    "node-libs-browser": "^2.1.0",
    "preload-webpack-plugin": "^2.3.0",
    "preprocess": "^3.1.0",
    "raw-loader": "^0.5.1",
    "run-sequence": "^2.2.1",
    "sass-lint": "^1.7.0",
    "sass-loader": "^7.0.3",
    "sasslint-webpack-plugin": "^1.0.3",
    "script-ext-html-webpack-plugin": "^2.0.1",
    "style-loader": "^0.21.0",
    "supports-color": "^5.4.0",
    "uid": "0.0.2",
    "url-loader": "^1.0.1",
    "webpack": "^4.12.1",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "yargs": "^11.0.0",
    "zxcvbn": "^4.4.0"
  },
  "scripts": {
    "test": "return 0",
    "serve": "set NODE_ENV=development&&gulp serve",
    "start": "webpack --watch --config webpack.dev.config.js --mode development",
    "start-ifrac": "set NODE_ENV=dev_ifrac && npm start",
    "build": "webpack --bail --config --mode production webpack.production.config.js",
    "build-ifrac": "set NODE_ENV=prod_ifrac && webpack --bail --mode production --config webpack.prod_ifrac.config.js",
    "build-socotec": "set NODE_ENV=prod_socotec && webpack --bail --mode production --config webpack.prod_socotec.config.js",
    "buildtest": "webpack --config --bail --mode production webpack.test.config.js"
  },
  "keywords": [
    "angular",
    "webpack",
    "es6"
  ],
  "repository": {
    "type": "git",
    "url": "https://gitlab.com/Argalis/formation-front.git"
  },
  "author": "Argalis"
}

Answer 1

我认为还不支持 webpack v4。有一个 PR 添加 https://github.com/GoogleChromeLabs/preload-webpack-plugin/pull/72