首页 > 开发 > JS > 正文

webpack2 提取vendor与manifest报错

2017-09-05 05:51:33  来源:网友分享

我的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...