vue3+webpack5.0

为了提高对webpack5的熟悉程度，我们从头来搭建一个基于webpack5的vue3工程，此篇重点介绍生产配置，链接地址：github.com/ponyfly/vue…

话不多说，先让我们来列举下我们要用到的技术栈

构建工具	Webpack 5.x
编程语言	TypeScript 4.x
css预编译	Less
前端框架	Vue3
路由管理	vue-router4
状态管理	Vuex4
UI框架	Element Plus
代码规范	EditorConfig+Prettier+Eslint

初始化目录

安装webpack webpack-cli

yarn add webpack webpack-cli -D

初始化目录和文件

• 创建 webpack.config.js文件用于编写 webpack配置

// webpack.config.js
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'js/[name].[hash:8].js',
        path: path.resolve(__dirname, 'dist')
    }
}

• 修改 package.json中 scripts 字段

{
  // ...
  "scripts": {
    "build": "webpack"
  },
  // ....
}

配置核心功能

处理js文件

ES6+ 转 ES5

• 安装依赖

yarn add @babel/core babel-loader @babel/preset-env -D

• 修改 webpack.config.js配置

const path = require('path');

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
}

处理样式

• 安装依赖

yarn add style-loader css-loader less less-loader -D
yarn add mini-css-extract-plugin css-minimizer-webpack-plugin -D

• 修改webpack.config.js配置

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 生产环境提取出单独的css文件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') // 生产环境压缩css
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
    // ...
    module: {
        rules: [
            // ...
        {
        test: /.(sa|sc|le|c)ss$/,
        use: [
        // 开发环境使用‘style-loader’， 生产使用MiniCssExtractPlugin.loader
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'less-loader',
        ],
      },
    },
    plugins: [
    // filename 指列在 entry 中，打包后输出的文件的名称。chunkFilename 指未列在 entry 中，却又需要被打包出来的文件的名称
      new MiniCssExtractPlugin({
        filename: devMode ? '[name].css' : '[name].[contenthash].css',
        chunkFilename: devMode ? '[id].css' : '[id].[contenthash].css',
      })
    ],
    optimization: [
      minimizer: [devMode ? '' : new CssMinimizerPlugin()]
    ]
}

使用了sass做类似的修改即可，postcss是一个加工样式的工具，例如添加前缀、修改单位等等，postcss的工具都是通过插件的形式引入的，所以需要什么工具引入即可，这些插件可以配置在loader中，但是最好是配置在一个单独的文件中

有一点需要注意，新版postcss-preset-env已经默认包含了自动添加前缀的插件autoprefixer，所以不需要单独引入了

• 新增postcss.config.js文件

module.exports = {
  plugins: ["postcss-preset-env"],
};

处理图片等资源

• 无需安装依赖 webapck5 自带静态资源处理，不需要我们再安装 url-loader file-loader

// webapck5 自带静态资源处理，不需要我们在安装 url-loader file-loader
// yarn add url-loader file-loader -D

• 修改 webpack.config.js配置

const path = require('path');

module.exports = {
    // ...
    module: {
        rules: [
            // ...
            {
              test: /.(jpe?g|png|gif)$/i,
              type: 'asset',
              generator: {
                // 输出文件位置以及文件名,[ext] 自带 "." 与 url-loader 配置不同
                filename: 'images/[name][hash:8][ext]',
              },
              parser: {
                dataUrlCondition: {
                  maxSize: 10 * 1024, //超过10kb不转 base64
                },
              },
            },
            {
              test: /.(woff2?|eot|ttf|otf)(?.*)?$/i,
              type: 'asset',
              generator: {
                filename: 'font/[name][hash:8][ext]',
              },
              parser: {
                dataUrlCondition: {
                  maxSize: 10 * 1024,
                },
              },
            },
            {
              test: /.(mp4|ogg|mp3|wav)$/,
              type: 'asset',
              generator: {
                filename: 'media/[name][hash:8][ext]',
              },
              parser: {
                dataUrlCondition: {
                  maxSize: 10 * 1024,
                },
              },
            },
        ]
    }
}

处理vue文件

• 安装依赖

yarn add vue@next -S
yarn add vue-loader@next @vue/compiler-sfc -D

• 修改 webpack.config.js配置

// VueLoaderPlugin 用于将定义过的js/css应用到.vue文件中
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
    // ...
    module: {
        rules: [
            {
              test: /.vue$/,
              use: ['vue-loader'],
            }
        ]
    },
    plugins: [new VueLoaderPlugin()],
}

注意：单文件组件被 vue-loader 解析成了三个部分，script 部分最终交由 ts-loader 来处理，但是 tsc 并不知道如何处理 .vue 结尾的文件，所以我们还需要处理这里的ts

• 为了解决这个问题，需要给 ts-loader 添加一个配置项

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.ts$/,
        loader: "ts-loader", //  babel7 已经支持 ts 的编译，所以 ts-loader 可以弃用了
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/.vue$/],
        },
      },
    ],
  },
  // ...
};

为了ts对vue文件的报错，我们需要在src目录下添加一个类型声明文件 shims-vue.d.ts,如果是通过vue-cli生成项目，会自动生成该文件

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

处理ts文件

• 安装依赖

yarn add babel-loader @babel/core @babel/preset-env @babel/preset-typescript -D

• 修改 webpack.config.js配置

module.epxorts = {
  module: {
    rules: [
      {
        test: /.(t|j)s$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            cacheDirectory: true,
          },
        },
      },
    ],
  },
};

• 添加 .babelrc.js

module.exports = {
  presets: [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }]
  ]
}

处理html

• 安装依赖

yarn add html-webpack-plugin -D

• 修改 webpack.config.js配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // ...
    plugins: [
        new HtmlWebpackPlugin({
          template: path.resolve(__dirname, 'public/index.html'),
          filename: 'index.html',
          minify: {
            collapseWhitespace: true,
            removeComments: true,
          },
      }),
    ]
}

其他配置

环境变量

设置环境变量方式

• 命令式
• 配置式
• 创建 .env 文件
• cross-env

我们以 cross-env的方式来设置环境变量, 因为他可以跨终端进行设置

• 安装依赖

yarn add cross-env -D

• 修改 package.json配置

{
    // ...
    "scripts": {
        "webpack": "cross-env NODE_ENV=production webpack"
    }
    // ...
}

清除打包文件

• 无需安装依赖，webpack5提供了output.clean来替代了clean-webpack-plugin

// yarn add clean-webpack-plugin -D 无需安装

• 修改 webpack.config.js配置

const path = require('path');


module.exports = {
  output: {
    filename: 'js/[name].[hash:8].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  }
}

设置路径别名

const path = require("path");

module.exports = {
  // ...
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "../src"),
    },
  },
  // ...
};

友好打包提示

• 安装依赖

yarn add friendly-errors-webpack-plugin -D

• 修改 webpack.config.js 配置文件：

const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");

modules.exports = {

  // ...

  plugins: [new FriendlyErrorsWebpackPlugin()],

  // ...

};

包文件分析

• 安装依赖

yarn add webpack-bundle-analyzer -D

• 修改 webpack.config.js 配置文件：

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

module.exports = {

  plugins: [
    // ...
    new BundleAnalyzerPlugin({
      analyzerMode: "disabled",
      generateStatsFile: true,
    }),
    // ...
  ],
};

• 在 package.json 中添加脚本：

{
  "scripts": {
    "analyze": "webpack-bundle-analyzer --port 3000 ./dist/stats.json"
  }
}

运行 yarn run analyze 分析打包情况

代码分割

• 在 webpack.config.js 中新增配置

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      // 默认是async，只对动态导入的文件进行拆分
      chunks: "all",
      // 提取chunk的最小体积
      minSize: 20000,
      // 要提取的chunk最少被引用次数
      minChunks: 1,
      // 对要提取的chunk进行分组
      cacheGroups: {
        // 匹配node_modules中的三方库，将其打包成一个chunk
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          name: "vendors",
          priority: -10,
        },
        default: {
          // 将至少被两个chunk引入的模块提取出来打包成单独chunk
          minChunks: 2,
          name: "default",
          priority: -20,
        },
      },
    },
  },
  // ...
};

集成element-plus

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')

这样使用会报错

error in ./node_modules/element-plus/es/components/calendar/src/date-table2.mjs

Module not found: Error: Can't resolve 'dayjs/plugin/localeData' in '/Users/zhangzechao/work/sdsea-study-vue3/node_modules/element-plus/es/components/calendar/src'
Did you mean 'localeData.js'?
BREAKING CHANGE: The request 'dayjs/plugin/localeData' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

在webpack.config.js中新增配置

module: [{
    test: /.(t|j|mj)s$/,
    include: path.resolve(__dirname, './node_modules/element-plus'),
    resolve: {
      fullySpecified: false,
    },
}]

代码规范

EditorConfig

EditorConfig有助于维护不同编辑器上的同一项目多个开发人员保持一致的编码风格,vscode需要安装对应插件来使用

• 在根目录新增.editorconfig

# Editor configuration, see http://editorconfig.org
root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = tab # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md]
max_line_length = off
trim_trailing_whitespace = false

Prettier

Prettier是一款强大的代码格式化工具

• 安装依赖

yarn add prettier -D

• 新建.prettierrc文件

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": true,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid"
}

• 在package.json中配置格式化命令

"script": {
  "prettier": "prettier --write .",
}

• 也可以在webstorm中使用“保存时自动格式化的功能”,这里大家可以自由选择（稍后我们会结合eslist一起使用）

Eslint

Eslint可以帮助我们检查代码质量和规范问题，并给出修复建议，有助于我们形成统一的代码风格

• 安装依赖

yarn add eslint -D 或者
npm init @eslint/config

• 配置 ESLint，根据终端操作提示完成一系列设置来创建配置文件

yarn eslint --init

• How would you like to use ESLint? （你想如何使用 ESLint?）

  选择To check syntax, find problems, and enforce code style（检查语法、发现问题并强制执行代码风格）

• What type of modules does your project use?（你的项目使用哪种类型的模块?）

  选择 JavaScript modules (import/export)

• Which framework does your project use? （你的项目使用哪种框架?）

  选择 Vue.js

• Does your project use TypeScript?（你的项目是否使用 TypeScript？）

  选择 Yes

• Where does your code run?（你的代码在哪里运行?）

  我们这里选择 Browser

• How would you like to define a style for your project?（你想怎样为你的项目定义风格？）

  选择 Use a popular style guide（使用一种流行的风格指南）

• Which style guide do you want to follow?（你想遵循哪一种风格指南?）

  选择Airbnb

如果安装失败，则需要手动安装

yarn add eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.2 @typescript-eslint/parser@latest -D
yarn add vue-eslint-parser -D 使用vue-eslint-parser解析template模板

• 配置 .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser', // 使用@typescript-eslint/parser解析script标签
    sourceType: 'module',
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    '@typescript-eslint/no-empty-function':
      process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    '@typescript-eslint/no-var-requires': 'off',
    'prettier/prettier': [
      'warn',
      {
        trailingComma: 'es5',
      },
    ],
  },
}

• 在webstorm中配置保存是自动修复

解决 Prettier 和 ESLint 的冲突

我们在配置prettier和eslint时有时候会遇到冲突，比如在prettier配置代码结束后面要加分号，在eslint配置不加，那我们保存后，使用prettier格式化后，加上了分号，但是eslint又报错了

解决两者冲突需要用到 eslint-plugin-prettier 和 eslint-config-prettier

• eslint-plugin-prettier 将 Prettier 的规则设置到 ESLint 的规则中。
• eslint-config-prettier 关闭 ESLint 中与 Prettier 中会发生冲突的规则。

最后形成优先级：Prettier 配置规则 > ESLint 配置规则

• 安装依赖

yarn add eslint-plugin-prettier eslint-config-prettier -D

• 在 .eslintrc.js 添加 prettier 插件

module.exports = {
  ...
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
    'plugin:prettier/recommended' // 添加 prettier 插件
  ],
  ...
}

对于vue3 项目我们可以使用@vue/eslint-config-prettier代替eslint-config-prettier，@vue/eslint-config-prettier是专门为vue3定制的，在.eslintrc.js中我们可以将'plugin:prettier/recommended'修改为'@vue/prettier'

module.exports = {
  ...
  extends: [
    'plugin:vue/vue3-essential',
    'airbnb-base',
    'plugin:@typescript-eslint/recommended',
    '@vue/prettier',
  ],
  ...
}

这样，我们在执行 eslint --fix 命令时，ESLint 就会按照 Prettier 的配置规则来格式化代码，从而解决二者冲突

至此，我们要说的也就差不多了，当然还有store的管理没说，这个大家就自行配置吧，也不难，居家好无聊，都不能出去找对象。