webpack5基础配置

Wen达
231 阅读2分钟

基础插件

  • webpack: 打包插件，提供打包主入口及配置插槽
  • webpack-cli: 提供更方便的webpack.config.js文件配置
  • webpack-dev-server: 提供测试环境启动服务，指令webpack server
  • cross-env: 设置环境变量功能

webpack.config.js配置

  • entry: 指定输入路径
  • output: 指定输出信息 知识点clean每次构建清楚上次文件 filename输出文件名 path'entry'导出的路径
  • module: [rules: {test: 正则匹配, loader: 使用插件, use: 使用插件集, options: 插件配置}]
  • plugins: 插件集
  • mode: 构建环境类型,'development'｜'production' 生产环境将压缩js和json文件
  • devServer: 开发环境配置热启动更新
  • devtool: 建议开发环境使用'eval-source-map'，用于指定打包后的代码和本地代码的映射关系，方便调试

hash类型

'hash'｜'chunkhash'｜'contenthash'

  • hash: 当前次打包hash值
  • chunkhash: entry每一个文件都会创建以一个chunkhash，同一chunk下该值相同
  • contenthash: 不同文件创建不同contenthash

处理html

html-webpack-plugin 打包时会自动引入output文件，可以自定义模版

        new HtmlWebpackPlugin({
            template: resolve(__dirname, './src/index.html'),
            inject: "body",
        })

处理html中引入的图片文件

{
                        test: /\.html$/,
                        loader: "html-loader"
                    },

处理css

  • css-minimizer-webpack-plugin: 压缩css代码
  • mini-css-extract-plugin: 将js中引入的css剥离出来
  • css-loader: 处理js中的css
  • postcss-loader: css兼容代码
  • less-loader: 处理js中的less
  • style-loader: 将js中的css运行时创建在style标签上，在开发环境比mini-css-extract-plugin要快
const commonCssLoader = [
    MiniCssExtractPlugin.loader, // 开发环境使用style-loader
    'css-loader',
    'postcss-loader'
]

// module.rules中
		{
                        test: /\.css$/,
                        use: commonCssLoader
                    },
                    {
                        test: /\.less$/,
                        use: [
                            ...commonCssLoader,
                            'less-loader'
                        ]
                    },

// plugins中
new MiniCssExtractPlugin({
    filename: 'css/build.[contenthash:10].css'
}),
new CssMinimizerWebpackPlugin()

// postcss.config.js中
module.exports = {
    plugins: [
        require('postcss-preset-env')
    ]
}

配置css兼容浏览器类型

在package.json文件中的browserslist字段配置浏览器

"browserslist": {
    "development": [
      "last 1 chrome version"
    ],
    "production": [
      ">0.01%"
    ]
  }

处理静态资源 例如图片、字体包

type: "asset/resource"

{
                        test: /\.(webp|png|jpg)$/,
                        type: "asset/resource",
                        generator: {
                            filename: 'asset/[name].[hash:6][ext]'
                        }
                    }

js兼容性处理

  • babel-loader: 只提供简单的js兼容
  • @babel/preset-env
  • core-js: 用于提供大量的兼容代码，并是按需引入的方式
{
                        test: /\.js$/,
                        exclude: /node_modules/,
                        loader: "babel-loader",
                        options: {
                            cacheDirectory: true, // 缓存babel,再次打包时会更快
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        useBuiltIns: 'usage',
                                        corejs: {
                                            version: 3
                                        },
                                        targets: {
                                            ie: '11', // 指定兼容到浏览器的版本号
                                        }
                                    }
                                ]
                            ]
                        }
                    }

开发环境热启动配置

devServer: {
    hot: true, // 热启动，修改代码保存后立马更新
    open: true, // 启动后打开默认浏览器
    prot: 8000, // 启动端口号
    compress: true, // 压缩
}

demo

整体webpack.config.js文件如下

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')

const NODE_ENV = process.env.NODE_ENV
const isDev = NODE_ENV === 'development'

const commonCssLoader = [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'postcss-loader'
]

module.exports = {
    entry: [
        './src/index.js',
        './src/index.html' // 此处为了html热更新
    ],
    output: {
        filename: "js/index.[contenthash:10].js",
        path: resolve(__dirname, 'dist'),
        clean: true,
    },
    module: {
        rules: [
            {
                oneOf: [
                    {
                        test: /.js$/,
                        exclude: /node_modules/,
                        loader: "babel-loader",
                        options: {
                            cacheDirectory: true,
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        useBuiltIns: 'usage',
                                        corejs: {
                                            version: 3
                                        },
                                        targets: {
                                            ie: '11',
                                        }
                                    }
                                ]
                            ]
                        }
                    },
                    {
                        test: /.css$/,
                        use: commonCssLoader
                    },
                    {
                        test: /.less$/,
                        use: [
                            ...commonCssLoader,
                            'less-loader'
                        ]
                    },
                    {
                        test: /.html$/,
                        loader: "html-loader"
                    },
                    {
                        test: /.(webp|png)$/,
                        type: "asset/resource",
                        generator: {
                            filename: 'img/[name].[hash:6][ext]'
                        }
                    },
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: resolve(__dirname, './src/index.html'),
            inject: "body",
        }),
        new MiniCssExtractPlugin({
            filename: 'css/build.[contenthash:10].css'
        }),
        new CssMinimizerWebpackPlugin()
    ],
    devServer: {
        port: 8000,
        hot: true,
        open: true,
        compress: true
    },
    devtool: isDev ? 'eval-source-map' : undefined, // 只在开发
    mode: NODE_ENV
}

整体package.json文件如下

{
  "name": "demo",
  "version": "1.0.0",
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack server",
    "dev": "cross-env NODE_ENV=development webpack",
    "build": "cross-env NODE_ENV=production webpack"
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@babel/preset-env": "^7.15.6",
    "babel-loader": "^8.2.2",
    "core-js": "^3.18.0",
    "cross-env": "^7.0.3",
    "css-loader": "^6.3.0",
    "css-minimizer-webpack-plugin": "^3.0.2",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "mini-css-extract-plugin": "^2.3.0",
    "postcss-loader": "^6.1.1",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^3.2.1",
    "webpack": "^5.53.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.2.1"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version"
    ],
    "production": [
      ">0.01%"
    ]
  }
}
avatar
文章
阅读
粉丝