webpack5 之生产配置

1,008 阅读2分钟

这是我参与11月更文挑战的第8天,活动详情查看:2021最后一次更文挑战

(一) webpack5之初体验 (二) webpack5之核心配置

1, CSS样式文件提取

在之前的配置文件中,所有的css样式代码都被编译成js代码,在js文件中,在生产环境中,为了加快静态资源的下载,打包的时候,可以通过插件提取出单独的CSS文件。

(1) 插件安装

 npm i mini-css-extract-plugin -D

(2) 配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

plugins: [
    new MiniCssExtractPlugin()
]

注意:之前讲过:

style-loader是创建style标签,将样式嵌入

css-loader是将css文件整合到JS文件中

如果要使用MiniCssExtractPlugin插件,就必须删除带哦style-loader, 通过下面的loader代替,作用就是:提取JS中的CSS成单独文件

MiniCssExtractPlugin.loader

(3) 为提出的CSS文件指定输出路径和重命名,详细的配置参考下面的代码

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { resolve } = require('path')
module.exports = {
   entry: './src/js/index.js',
   output: {
     filename: 'js/bundle.js',
     path: resolve(__dirname, 'build')
   },
   module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           // 'style-loader',
           MiniCssExtractPlugin.loader,
           'css-loader'
         ]
       }
     ]
   },
   plugins: [
     new HtmlWebpackPlugin({
       template: './src/index.html'
     }),
     new MiniCssExtractPlugin({
         // 单独提出css文件重命名
        filename: 'css/bundle.css'
     })
   ],
   mode: 'development'
};

2, CSS兼容性处理

为适配各个厂商的浏览器,需要对CSS进行兼容性处理。一般处理兼容性方法,需要安装:

postcss-loader , postcss-preset-env

(1) 安装插件

npm i postcss-loader postcss-preset-env -D

(2) 添加配置

1636380081283.png

注意:webpack4 和 webpack5此处不一样

webpack5 配置

  {
             loader: 'postcss-loader',
             options: {
               postcssOptions: {
                 plugins: [
                   require('postcss-preset-env')()
                 ]
               }
             }
           }

webpack4 配置

{
             loader: 'postcss-loader',
             options: {
               ident: 'postcss',
               plugins: () => [
                 // 使用postcss插件
                 require('postcss-preset-env')()
                ]
             }
           }

原理: 配置完postcss-loader之前, 还需要修改该loader的配置,不能使用默认loader, 需要配置 postcss-preset-env插件, 因为它会帮助postcss找到package.json中的browserslist里面的配置, 通过配置加载指定的CSS兼容性样式。

package.json中添加下面的配置

 "browserslist": {
    "development": [
      "last 1 chrome version",  // 兼容最近的chrome浏览器版本
      "last 1 firefox version", // 兼容最近的firefox浏览器版本
      "last 1 safari version"   // 兼容最近的safari浏览器版本
    ],
    "production": [
      ">0.2%", // 包含了99.8%的浏览器
      "not dead", // 排除掉已经废弃的浏览器
      "not op_mini all"
    ]
  }

下面是package.json代码截图

1636378987077.png

如果想查看详细的browserslist的配置,可以查看github介绍

browserslist

3, 压缩CSS文件

(1)插件安装

npm i optimize-css-assets-webpack-plugin -D

(2) 引入插件

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

(3) 配置插件

   plugins: [
     new HtmlWebpackPlugin({
       template: './src/index.html'
     }),
     new MiniCssExtractPlugin({
        filename: 'css/bundle.css'
     }),
      // 压缩CSS
     new OptimizeCssAssetsWebpackPlugin()
   ],

4, ESLint语法检查

语法检查,主要是服务于团队开发,保持大家一致的开发习惯,在webpack中配置eslint语法规范,需要提前安装eslint-loader, eslint

还要注意:只检查用户自己写的JS文件,不检查第三方库的JS代码, 而且还要设置检查规则, 在package.json文件中设置, 具体的配置步骤:

(1) 安装插件

npm i eslint-loader eslint -D

为了使用aribnb规范进行检查,还需要安装插件 aribnb依赖的插件,总结一下:

airbnb—> eslint-config-airbnb-base , eslint, eslint-plugin-import

npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

(2) 配置插件

  module: {
    rules: [
      // 语法检查 eslint-loader , eslint
      {
        test: /\.js$/,  
        exclude: /node_modules/,
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          // 自动修复eslint语法
          fix: true
        }
      }
    ]
  },

(3) 设置检查规则

package.json中对eslintConfig进行设置

  "eslintConfig": {
    "extends": "airbnb-base"
  }

如果想单独过滤到某一条

即:下一行eslint所有规则都失效

// eslint-disable-next-line
console.log(add(2, 1));

踩坑记:

1636385172399.png

在安装上面的操作之后,webpack版本不一样有报错,每次通过webpack进行编译的时候,报错

Module build failed (from ../node_modules/eslint-loader/dist/cjs.js): TypeError: Cannot read property 'getFormatter' of undefined

解决方案:执行下面命令

npx install-peerdeps --dev eslint-config-airbnb-base

5, JS兼容性处理

JS兼容性处理需要:babel-loader, @babel/preset-env, @babel/core, @babel/polyfill

(1)插件安装

npm i babel-loader @babel/preset-env @babel/core @babel/polyfill -D

(2)添加配置

  {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // 预设: 指示babel做怎么样的兼容性处理
          presets: ['@babel/preset-env'],
        },
      },

(3) 引入插件

import '@babel/polyfill'

存在的问题: 引入了所有的兼容性处理代码,导致包太大了,所有我们需要按需加载,需要 core-js

下面是兼容性处理的方案(2)

下载:core-js

npm i core-js -D

添加配置

options: {
          // 预设: 指示babel做怎么样的兼容性处理
          presets: [
            '@babel/preset-env',
            {
              useBiltIns: 'usage',
              corejs: {
                version: 3,
              },
              // 指定兼容到哪个版本的浏览器
              targets: {
                chrome: '60',
                firefox: '60',
                ie: '9',
                safari: '10',
                edge: '17'
              }
            }
        ],
        },

此时要注意: 注释到 之前的引入

// import '@babel/polyfill'  使用了core-js, 放弃这个方案

1636386689559.png

6, 源码下载

webpack5学习源码