webpack5 的最新使用

 

一、安装最新依赖库版本设定

{
  "name": "blogs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --progress --config ./config/webpack.config.dev.js",
    "dev": "webpack --config ./config/webpack.config.dev.js",
    "build": "webpack --config ./config/webpack.config.prd.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "npb",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.27.2",
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@babel/plugin-transform-runtime": "^7.18.2",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "autoprefixer": "^10.4.7",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "happypack": "^5.0.1",
    "html-webpack-plugin": "^5.5.0",
    "postcss-loader": "^7.0.0",
    "react-hot-loader": "^4.13.0",
    "style-loader": "^3.3.1",
    "thread-loader": "^3.0.4",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  },
  "browserslist": [
    ">1%",
    "last 4 versions",
    "Firefox ESR",
    "Android >= 7",
    "IOS >= 11",
    "Safari >= 11",
    "Chrome >= 49",
    "not ie < 11"
  ]
}

二、开始进行webpack配置

目录结构

Ⅰ、开始配置webpack.config.dev.js

// webpack 打包
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 导入html文件
const HappyPack = require('happypack'); // 多进程
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); // cpu个数


module.exports = {
    target: 'web', // 本地环境构建运行目标 生成用 target: browserslist
    mode: 'development', // 本地环境模式 生产production
    entry: './app/index.js', // 文件入口
    output: { // 输出目录
        path: path.resolve(__dirname, '../bundle'),
        filename: 'js/[name].[fullhash:4].js',
        clean: true, // 清除上次打包文件的目录下所有文件
    },
    //
    resolve: {
        extensions: ['.js', '.jsx', '.json'], // 文件寻找优先级
        alias: {
            '@': path.resolve(__dirname, '../app') // 目录别名 import '@/index' => import 'app/index'
        }
    },
    devServer: {
        static: {
            directory: path.join(__dirname, '../public'), // 静态目录
        },
        compress: true, // 开启压缩
        port: 8088, // 本地服务websocket端口
        host: 'localhost',
        // host: '0.0.0.0', // 切换后开启统一局域网访问
        hot: true, // 热加载
        open: true, // 自动打开浏览器
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(), // 模块热替换 webpack自带模块
        new HtmlWebpackPlugin({ // html生成文件到处到打包目录
            template: './public/index.html',
            filename: 'index.html',
            inject: 'body', // script输出到body末尾，防止js阻塞进程
            scriptLoading: 'blocking', // 异步加载
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
        }),
        new HappyPack({ // 多线程打包loader对应modules里的id=babel
            id: 'babel',
            threadPool: happyThreadPool,
            loaders: [
                {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory:true, // 缓存
                        presets: ['@babel/preset-env', '@babel/preset-react'], // react 补丁 vue参考babel官网替换loader和补丁
                        plugins: ['@babel/plugin-transform-runtime', 'react-hot-loader/babel'],
                    },
                }
            ]
          }),
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/, // 同上
                exclude: /node_modules/,
                use: {
                    loader: 'happypack/loader?id=babel',
                }
            },
            { // 配置css并添加厂商前缀同时可以用postcss处理css复杂转换以及其他的loader， 如less，放在数组最后， 并修改importLoaders数量即可
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require('autoprefixer'),
                                ]
                            }
                        }
                    },
                ]
            }
        ]
    },
    // 项目分包优化
    // 将node_modules 下文件打包成vendors,缓存在浏览器
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10,
                    name: 'vendors',
                },
            },
        },
        runtimeChunk: true,
},
    // performance: false, // webpack5版本，当打包的输出js文件大于200多kb，会报错，设置为false，即可禁用，影响不大，本地开发禁用
    devtool: 'inline-source-map' // 开启sourcemap，当报错=> 定位到具体行， 生产设为false，防止源码泄露定位
}

 小结： 我不是技术的开发者，我只是技术的使用者,感谢官方教程文档