javascript - webpack2 提取vendor与manifest报错

问题描述

问 题

我的webpack配置文件，配置了代码压缩和html模板插件：

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ChunkManifestPlugin = require("chunk-manifest-webpack-plugin");
const WebpackChunkHash = require("webpack-chunk-hash");

const extractPlugin = new ExtractTextPlugin({
  filename: '[name].[chunkhash].css',
  ignoreOrder: true,
  allChunks: true
})

module.exports = {
    entry: {
      app: path.join(__dirname, 'src/index.jsx'),
      vendor: ['react','react-dom','redux','react-redux','react-router-dom','classnames','moment']
    },
    output: {
      path: path.join(__dirname, 'dist'),
      filename: "[name].[chunkhash].js",
      chunkFilename: "[name].[chunkhash].js"
    },
    resolve: { extensions: ['jsx', '.js', '.json', '.scss'] },
    module: {
      rules: [
        {
          loader: 'eslint-loader',
          test: /\.(js|jsx)$/,
          enforce: "pre",
          exclude: /node_modules/,
          options: {
            emitWarning: true,
          },
        },
        // sass
        {
          test: /\.scss$/,
          include: [path.resolve(__dirname, './src')],
          use: extractPlugin.extract({
            use: [
              {
                loader: "css-loader",
                options: {
                  modules: true,
                  localIdentName: '[name]__[local]--[hash:base64:5]',
                  Composing: true,
                  sourceMap: true,
                  importLoaders: 1
                }
              },
              {loader: "sass-loader"}
            ],
            fallback: 'style-loader'
          })
        },
        // jsx
        {
          test: /\.(js|jsx)$/,
          loader: 'babel-loader',
          include: [path.resolve(__dirname, './src')],
        },
        {
          test: /\.(png|jpg|gif|jpeg)$/,
          loader: 'url-loader?limit=10000&name=assets/[name].[ext]'
        }
      ]
    },
    plugins: [
      extractPlugin,
      new HtmlWebpackPlugin({
        // filename: 'index-[hash].html',
        template: './src/template/index.html',
        minify: {
          // https://github.com/kangax/html-minifier
          removeComments: true,
          collapseWhitespace: false,
          removeAttributeQuotes: true
        }
      }),
      new UglifyJSPlugin({
        compress: {
          warnings: false,
          drop_console: true
        },
        beautify: false,
        except: ['$super', '$', 'exports', 'require']
      }),
        
      //--------提取vendor与manifest---------
      new webpack.optimize.CommonsChunkPlugin({
        name: ["vendor", "manifest"], // vendor libs + extracted manifest
        minChunks: Infinity,
      }),
      new webpack.HashedModuleIdsPlugin(),
      new WebpackChunkHash(),
      new ChunkManifestPlugin({
        filename: "chunk-manifest.json",
        manifestVariable: "webpackManifest",
        inlineManifest: true
      }),
      new webpack.optimize.ModuleConcatenationPlugin(),
      //--------------------------------
    ]
};

提取插件代码在配置文件最底部，网上许多提取方法写法都尝试过，依旧是报下面这个错误：

打包没有任何问题，输出目录：

折腾了两天，不太明白原因。

解决方案

写法有误 正确写法

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: module => {
    return module.resource && /node_modules/.test(module.resource)
  }
}),
new webpack.optimize.CommonsChunkPlugin({
  name: 'client',
  async: 'chunk-vendor',
  children: true,
  minChunks: (module, count) => {
    return count >= 3
  }
}),
new webpack.optimize.CommonsChunkPlugin({
  name: "runtime",
  minChunks: Infinity
}),

参考 https://github.com/creeperyan...

这篇关于javascript - webpack2 提取vendor与manifest报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！