webpack.config.js 配置

这个是webpack.base.js 文件

const dev = require('./webpack.dev.js')
const prod = require('./webpack.prod.js')
const path = require('path')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动生成html 文件并且引入打包后的js 内容
// const CleanWebpackPlugin = require('clean-webpack-plugin') // 每次打包清除dist下的目录
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 引用vue 还需要一个插件在loader中
const VueLoaderPlugin = reuqire('vue-loader/lib/plugin')

const glob = require('glob') // 主要功能就是查找配置文件
// let paths = glob.sync("../src/**/*", {nodir: true})
// 主要删除无意义的css  只能配合 mini-css-extract-plugin
const PurgeCssWebapckPlugin = reuqire('purgecss-webpack-plugin')


const AddCdnPlugin = require('add-asset-html-cdn-webpack-plugin')

const DLLReferencePlugin = require('webpack').DllReferencePlugin

const AddAssetHtmlPlugin = require('add-asset-html-plugin')

const { BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')

module.exports = (env) => {
    let isDev = env.development
    const base = {
        // entry: path.resolve(__dirname, '../src/index.js'), // 写路径都采用绝对路径
        entry:{
            "a": path.resolve(__dirname, '../src/a.js'),
            "b": path.resolve(__dirname, '../src/b.js')
        },
        optimization: {
            splitChunks: {
                chunks: 'async', // 默认支持异步的代码分割 import（）
                minSize: 30000, // 文件超过30000k就会抽离
                maxSize: 0,
                minChunks: 1, // 模块最少引用一次才抽离
                maxAsyncRequests: 5, // z最多5个请求
                maxInitialRequests: 3, // 最多首屏加载3个请求
                automaticNameDelimiter: '~', // xxx a～b
                automaticNameMaxLength: 30, // zuzu最长名字打大小
                name: true,
                cacheGroups: { // 缓存组
                    vendors: {
                        test: /[\\/]node_modules[\\/]/,
                        priority: -10,
                    },
                    default: {
                        minChunks: 2,
                        priority: -20,
                        reuseExistingChunk: true
                    }
                }
            }
        },
        externals: {
            'jquery': '$' // b不去打包代码中的jquery
        },
        module: {
            // 转化什么文件，用什么去转 用哪些loader
            // loader 写法 {} [] ''
            // 解析css的时候就不能渲染dom 所以搞个插件 可以并行 js 一起加载 mini-css-extract-plugin
            rules: [
                {
                    test: /\.vue$/,
                    loader: 'vue-loader' // 新建一个.babelrc 默认调用这个文件
                },
                {
                    test: /\.tsx?$/,
                    loader: 'babel-loader' // 新建一个.babelrc 默认调用这个文件
                },
                {
                    test: /\.js$/,
                    loader: 'babel-loader' // 新建一个.babelrc 默认调用这个文件
                },
                {
                    tets: /\.css$/,
                    // use: ['style-loader', 'css-laoder']
                    // 有这样的情况 css文件中再引用scss文件 scss可能还会在引用css
                    use: [
                        // 开发环境 style-loader 生产用这个并行的
                        isDev ? 'style-loader': MiniCssExtractPlugin, {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2 // 对应后边第二个loader
                        }
                    },'postcss-loader', 'sass-loader']
                },
                {
                    tets: /\.scss$/,
                    use: ['style-loader', 'css-loader', 'sass-loader']
                },
                // 图标的
                {
                    test: /\.(woff|ttf|eot|svg)$/,
                    use: 'file-loader'
                },
                {
                    test: /\.(jpe?g|gif|png|bmp)$/,
                    use: [{
                        loader: 'url-laoder',
                        options: {
                            name: 'image/[chunkhash].[ext]',
                            limit: 8 * 1024
                        }
                    }, {
                        loader: 'image-webpack-loader',
                        options: {
                            pngquant: {
                                quality: [0.65, 0.90],
                                speed: 4
                            }
                        }
                    }]
                    // 'file-loader' // m默认的功能是拷贝
                    // 但是希望当前比较小的图片转为base64 大小会比之前大点好处就是不需要请求接口
                }
            ]
        },
        // c出口
        output: {
            filename: '[name].js', // 同步打包的名字
            chunkFilename: '[name].min.js',
            path: path.resolve(__dirname, '../dist')
        },
        plugins: [
             new MiniCssExtractPlugin({ // 开发环境不使用
                filename: 'css/main.css'
            }),
            new PurgeCssWebapckPlugin({
                paths: glob.sync('../src/**/*', {nodir: true})
            }),
            new VueLoaderPlugin(),
            // new CleanWebpackPlugin(),// 默认全部清除 z这个应该在 生产环境
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, '../public/index.html'),
                filename: 'index.html',
                chunksSortMode: 'manual',
                chunks: ["a"],
                minify: !isDev && {
                    removeAttributeQuotes: true,
                    collapseWhitespace: true //  压缩为一行
                }
            }),
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, '../public/index.html'),
                filename: 'login.html',
                chunksSortMode: 'manual', // sho手动排序 先b后a
                chunks: ["b", "a"],
                minify: !isDev && {
                    removeAttributeQuotes: true,
                    collapseWhitespace: true //  压缩为一行
                }
            }),
            new AddCdnPlugin(true, {
                'jquery': 'https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js'
            }),
            new DLLReferencePlugin ({
                manifest: path.resolve(__dirname, 'dll/manifest.json')
            }),
            !isDev && new AddAssetHtmlPlugin({
                filename: path.resolve(__dirname, './dll/react.dll.js')
            }),
            new BundleAnalyzerPlugin()
        ].filter(Boolean)
    }
    // 函数要返回配置文件 没有返回会采用默认配置
    if (isDev) {
        return merge(base, dev)
    } else {
        return merge(base, prod)
    }
}

这个是webpack.dev.js的文件

const path = require('path')

module.exports = {
    mode: 'development',
    devServer: { // 开发服务配置
        port: 8000,
        compress: true, // gzip 可以提升返回页面的速度
        contentBase: path.resolve(__dirname, '../dist')
    }
}

这个是webpack.prod.js文件

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin') // 每次打包清除dist下的目录

module.exports = {
    mode: 'production',
    optimization: { // 优化项
        minimizer: [ // 可以放置压缩方案
            new OptimizeCSSAssetsPlugin(), // 用了这个 js也得手动配置压缩
            new TerserWebpackPlugin()
        ]

    },
    plugins: [
        new CleanWebpackPlugin(),// 默认全部清除
    ]
}