stephencookdev / speed-measure-webpack-plugin

⏱ See how fast (or not) your plugins and loaders are, so you can optimise your builds
MIT License
2.41k stars 80 forks source link

webpack5 #172

Open smileBeauty opened 3 years ago

smileBeauty commented 3 years ago

ERROR in ../../node_modules/antd/lib/button/style/index.css Module build failed (from ../../node_modules/mini-css-extract-plugin/dist/loader.js): Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. { plugins: [new MiniCssExtractPlugin()] }), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started

smileBeauty commented 3 years ago

const path = require('path'); const glob = require('glob'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin'); const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin'); const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap({ mode: 'production', devtool: false, target: 'web', entry: path.resolve(dirname, '../src/main.js'), output: { path: path.resolve(dirname, '../dist'), filename: '[name].[contenthash].bundle.js', assetModuleFilename: './asset/[hash].[ext]' }, module: { rules: [ { test: /.js$/, exclude: /nodemodules/, use: [ { loader: 'babel-loader', options: { cacheDirectory: false } } ] }, { test: /.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] }, { test: /.(png|jpg|jpeg|gif|ico)$/, type: 'asset', parser: { dataUrlCondition: { maxSize: 4 * 1024 } } } ] }, plugins: [ new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: '[name][contenthash].css' }), new HtmlWebpackPlugin({ filename: 'index.html', template: path.resolve(dirname, '../template/index.html'), inject: 'body', favicon: path.resolve(dirname, '../template/favicon.ico') }) ], optimization: { minimizer: [ new CssMinimizerWebpackPlugin(), new UglifyJsWebpackPlugin({ // 用多进程并行运行以提高构建速度 默认并发运行次数:os.cups().length - 1 parallel: true, cache: false, sourceMap: true }) ], splitChunks: { // 所有的包全部在分包范围 chunks: 'all', // 最少被使用几次 minChunks: 1, // 最小的包大小 否则就算引用次数够了也不单独抽离 minSize: 0, // 最大异步请求数 maxAsyncRequests: 6, // 最大同步请求数 maxInitialRequests: 6, cacheGroups: { moment: { test: /[\/]node_modules[\/]moment[\/]/, priority: -5, name: 'moment' }, 'react-react-dom': { test: /[\/]node_modules\/[\/]/, priority: -5, name: 'react-react-dom' }, vendors: { test: /[\/]node_modules[\/]/, priority: -10, name: 'vendors' }, common: { minChunks: 2, minSize: 0, priority: -10, name: 'common' } }, } }, externals: { jquery: 'jQuery' } });

david10sing commented 3 years ago

167