我的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}),