Fork me on GitHub

webpack 配置

字数统计: 4.2k字   |   阅读时长≈ 17分

涉及知识

  • 构建工具：Webpack5.x
  • 前端框架：Vue 3.x
  • 路由工具：Vue Router 4.x
  • CSS 预编译：Less
  • Git Hook 工具：husky
  • 代码规范：Prettier + Eslint + Airbnb
  • 自动部署：Github Actions

一、webpack基础配置

1、每一个伟大的项目从npm init 开始

1
2
3
4
5
// 初始化项目
npm init

// 直接跳过选项
npm init -y

2、webpack 三件套

1
2
3
4
5
6
// 本体， 脚手架， 热加载
npm i webpack webpack-cli webpack-dev-server -D


-D 等价于 --save-dev; 开发环境时所需依赖
-S 等价于 --save; 生产环境时所需依赖

3、区分开发环境与生产环境

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// 新增目录结构
├─build
│  ├─webpack.common.config.js   //公共配置，
│  ├─webpack.dev.config.js     //mode为development的	配置
│  ├─webpack.prod.config.js    //mode为production配置
│  ├─webpack.loader.config.js  //配置loader

// 公共配置

const { resolve } = require('path')
const webpack = require('webpack')
// 引入vueLoader 文件
const { VueLoaderPlugin } = require('vue-loader/dist/index')

require('dotenv').config({ path: `.env.${process.env.envMode}` })
let env = {}
// 只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中
for (const key in process.env) {
  if (key === 'NODE_ENV' || key === 'BASE_URL' || /^VUE_APP_/.test(key)) {
    env[key] = JSON.stringify(process.env[key])
  }
}

module.exports = (mode) => {
  return {
    //   入口
    entry: {
        // 默认使用当前路径
        context: path.resolve(__dirname, "src"),
        home: './main.js'
    },
    // 输出
    output: {},
    // 模式
    // module: '',
    // 加载器
    // loader: {},
    // 插件
    plugins: [
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            // 定义环境和变量
            'process.env': {
            ...env
            }
        })
    ],
    // 开发中
    devServe: {},
    // 开发工具
    devtool: {}
    ...
  }
}

4、安装dotenv、cross-env 配置环境变量

cross-env : windows不支持NODE_ENV=development的这样的设置方式，所以需要引入库实现兼容
dotenv : 支持.env, 可将环境变量从.env文件加载到process.env中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
cross-env 就是运行跨平台设置和使用环境变量的脚本。
	-添加后即可在 package.json 的 script 中使用 NODE_ENV=development 语句
dotenv 可将环境变量从.env文件加载到process.env中
	- require('dotenv').config();即可启用
    
cnpm i dotenv cross-env -D

// 根目录新增

├─.env.dev //配置开发环境的变量
├─.env.prod //配置生产环境的变量


// env.dev.js 新增

NODE_ENV = 'development'
VUE_SHOWCONSOLE = true  //是否显示console
VUE_DEV_URL ='www.xxx.com' //开发环境接口地址

5、运行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 在根目录下新增 src文件夹,index.js文件

此时的目录

├─build
│  ├─webpack.common.config.js   //公共配置，
│  ├─webpack.dev.config.js     //mode为development的	配置
│  ├─webpack.prod.config.js    //mode为production配置
│  ├─webpack.loader.config.js  //配置loader
├─src
│  ├─index.js   //默认入口文件， 可以通过 配置文件 entry 设置


// 运行编译
npm run dev

6、安装 vue3 和 vue-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 安装vue
npm i vue@next -D

// 安装 vue-loader 解析vue语法 
// 安装 vue/compiler-sfc 主要是用来解析SFC组件,我们都知道,一个SFC(*.vue)文件三大要素是template、script、style

npm i vue-loader@next @vue/compiler-sfc -D

// webpack.loader.config.js 新增
{
    test: /.vue$/,
    use: [
        'vue-loader'
    ]
}

7、Es6优雅降级

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// babel 三件套
npm i @babel/core @babel/preset-env babel-loader -D

// webpack.loader.config.js 新增
{
    test: /.js$/,
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader',
    }
}, 
    
// babel 配置文件

// babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ['last 2 versions'] // 最近 2 个版本的浏览器
        }
      }
    ]
  ]
}

8、安装html-webpack-plugin

安装 html-webpack-plugin 插件处理 index.html 文件，此插件的功能是根据提供的模板文件，自动生成正确的项目入口文件，并把 webpack 打包的 js 文件自动插入其中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19


npm i html-webpack-plugin -D


// webpack.common.config.js
new HtmlWebpackPlugin({
 template: resolve(__dirname, '../index.html'),
 filename: 'index.html',
 title: 'nigo-cli',
 minify: {
  html5: true, // 根据HTML5规范解析输入
  collapseWhitespace: true, // 折叠空白区域
  preserveLineBreaks: false,
  minifyCSS: true, // 压缩文内css
  minifyJS: true, // 压缩文内js
  removeComments: false // 移除注释
 },
})

9、添加vue-router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
npm i vueRouter@last -D

// 下面语法为 vue-router4
import { createRouter, createWebHashHistory } from 'vue-router'

// 新增路劲

├─src
   ├─router
   │   ├─index.js   //定义路由规则

// 修改 src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/home.vue')
  }
]


const router = createRouter({
  history: createWebHashHistory(),
  routes 
})

export default router

// 修改 src/main.js
import { createApp } from 'vue'
import App from '@/App.vue' // 引入 APP 页面组建
import router from '@/router'

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


10、添加 less 预处理器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 四件套
npm i style-loader css-loader less-loader less -D

 style-loader
    - 作用
    -style-loader能够在需要载入的html中创建一个<style></style>标签，标签里的内容就是CSS内容。

 css-loader
    - 作用
    css-loader是允许在js中import一个css文件，会将css文件当成一个模块引入到js文件中。

// webpack.loader.config.js

rules: [
    {
      test: /.less$/,
      use: ['style-loader', 'css-loader', 'less-loader']
    },
]

11、添加路径别名

assets和static文件夹的区别
相信有很多人知道vue-cli有两个放置静态资源的地方，分别是src/assets文件夹和static文件夹,这两者的区别很多人可能不太清楚。

assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。例如，在
和 background: url(./logo.png)中，”./logo.png” 是相对的资源路径，将由Webpack解析为模块依赖。

static/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。

任何放在 static/ 中文件需要以绝对路径的形式引用：/static/[filename]。

在我们实际的开发中，总的来说：static放不会变动的文件 assets放可能会变动的文件。

1
2
3
4
5
6
7
8
9
10
11
// webpack.common.config.js

resolve: {
    //...
    alias: {
        '@': resolve('src'),
        'static': resolve('static'),
     }
}


[注意]：
这里给’static’赋予了一个地址，那么在程序中引入路径的时候 ’~static’ 就直接可以代替路径’../static’

12、处理图片等静态资源

Webpack5 之前我们处理静态资源比如PNG 图片、SVG 图标等等，需要用到url-loader，file-loader，raw-loader。Webpack5 提供了内置的静态资源构建能力，我们不需要安装额外的 loader，仅需要简单的配置就能实现静态资源的打包和分目录存放。这三个loader在github上也停止了更新。

webpack5使用四种新增的资源模块（Asset Modules[3]）替代了这些loader的功能。

asset/resource 将资源分割为单独的文件，并导出url，就是之前的 file-loader的功能.
asset/inline 将资源导出为dataURL（url(data:)）的形式，之前的 url-loader的功能.
asset/source 将资源导出为源码（source code）. 之前的 raw-loader 功能.
asset 自动选择导出为单独文件或者 dataURL形式（默认为8KB）. 之前有url-loader设置asset size limit 限制实现。

1
2
3
4
5
6
7
8
9
10
11
12
13


// 配置 webpack.loader.config.js

{
    test: /.(png|jpg|svg|gif)$/,
    type: 'asset/resource',
    generator: {
        // [ext]前面自带"."
        filename: 'assets/[hash:8].[name][ext]',
    },
}

13、清除dist目录

webpack5.20以下版本清除dist文件内容一般使用插件 clean-webpack-plugin， 5.20版本以后output新增特性clean，用于清除dist目录

1
2
3
4
5
6
7
8
9
10


// 配置webpack.prod.config.js

module.exports = {
  //...
  output: {
    clean: true, // Clean the output directory before emit.
  },
};

14、FileSystem Cache 加速二次构建

Webpack5 之前，我们会使用 cache-loader[4] 缓存一些性能开销较大的 loader ，或者是使用 hard-source-webpack-plugin[5] 为模块提供一些中间缓存。在 Webpack5 之后，默认就为我们集成了一种自带的缓存能力（对 module 和 chunks 进行缓存[6]）。通过如下配置，即可在二次构建时提速。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 配置webpack.prod.config.js

module.exports = {
    //...
    cache: {
        type: 'filesystem',
        // 可选配置
        buildDependencies: {
            config: [__filename],  // 当构建依赖的config文件（通过 require 依赖）内容发生变化时，缓存失效
        },
        name: '',  // 配置以name为隔离，创建不同的缓存文件，如生成PC或mobile不同的配置缓存
        //...
    },
}

以上介绍只是webpack5的新特性和比较基础的配置，后续还是要因应需求去配置。包括css分离、css压缩、js压缩等，在这里就不一一展开讨论。

二、代码规范

如果需要团队合作完成我们就要考虑代码规范的问题，由于 JavaScript 的灵活性，往往一段代码能有多种写法，这时候也会导致协同时差异。并且，有一些写法可能会导致不易发现的 bug，或者这些写法的性能不好，开发时也应该避免。

为了解决这类静态代码问题，每个团队都需要一个统一的 JavaScript 代码规范，团队成员都遵守这份代码规范来编写代码。当然，靠人来保障代码规范是不可靠的，需要有对应的工具来保障。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
1、安装 Prettier

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。

npm i prettier -D

// 在项目根目录下创建 .prettierrc 文件，在这个文件可以配置团队统一的格式化风格。

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": false
}
// 编辑器可以设置文件保存之后格式化

2、安装 ESLint

npm i eslint -D

ESLint 安装成功后，执行 npx eslint \--init，然后按照终端操作提示完成一系列设置来创建配置文件。

// 如果自动安装失败，那么就需要手动安装
npm i eslint-config-airbnb-base -D 
npm i eslint-plugin-vue -D
npm i eslint-config-prettier -D
npm i eslint-import-resolver-webpack -D
npm i eslint-plugin-import -D
npm i eslint-plugin-prettier -D
npm i eslint-webpack-plugin -D

在根目录添加忽略检查文件.eslintignore

node_modules
dist/
build/
/*.js

下面这个符号不是内容
*/

---------分割线--------

// 在根目录添加.eslintrc.js

module.exports = {
  root: true, // 此项是用来告诉eslint找当前配置文件不能往父级查找
  env: {
    browser: true,
    es2021: true
  },
  extends: ['plugin:vue/essential', 'airbnb-base', 'plugin:prettier/recommended'],
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  plugins: ['vue', 'prettier'],
  settings: {
    'import/resolver': {
      webpack: {
        config: 'build/webpack.dev.config.js'
      }
    }
  },
  rules: {
    'prettier/prettier': 'error'
  }
}

// webpack5.20 以后不需要eslint-loader直接在webpack.common.config.js添加如下代码

plugins:[
    new ESLintPlugin({
      // fix: true,
      extensions: ['js', 'json', 'vue'],
      exclude: '/node_modules/'
    })
]

三、提交git仓库

1、在根目录新建一个提交忽略的文件.gitignore

1
2
3
4
5
6
7
8
9
10
// .gitignore 新增忽略提交的文件

logs/
npm-debug.log
yarn-error.log
node_modules/
dist/
package-lock.json
yarn.lock
.idea/

2、提交规范

我们在项目中已集成 ESLint 和 Prettier，在编码时，这些工具可以对我们写的代码进行实时校验，在一定程度上能有效规范我们写的代码，但团队可能会有些人觉得这些条条框框的限制很麻烦，选择视“提示”而不见，依旧按自己的一套风格来写代码，或者干脆禁用掉这些工具，开发完成就直接把代码提交到了仓库，日积月累，ESLint 也就形同虚设。

所以，我们还需要做一些限制，让没通过 ESLint 检测和修复的代码禁止提交，从而保证仓库代码都是符合规范的。

为了解决这个问题，我们需要用到 Git Hook，在本地执行 git commit 的时候，就对所提交的代码进行 ESLint 检测和修复（即执行 eslint \--fix），如果这些代码没通过 ESLint 规则校验，则禁止提交。

实现这一功能，我们借助 husky[7]

husky[8] —— Git Hook 工具，可以设置在 git 各个阶段（pre-commit、commit-msg、pre-push 等）触发我们的命令。

使用 husky-init 命令快速在项目初始化一个 husky 配置。

1
2
npx husky-init && cnpm install

执行命令生成了一个.husky文件夹和一些文件

图片image.png

修改 pre-commit

1
2
3
4
5
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint

package.json 添加命令

1
2
3
4
"scripts": {
  "lint": "eslint --ext .js,.vue src"
},

测试一下提交代码，会看到有报错的代码是提交不了的

四、自动部署项目

创建 GitHub Token

创建一个有 repo 和 workflow 权限的 GitHub Token[9]

图片image.png

注意：新生成的 Token 只会显示一次，保存起来，后面要用到。如有遗失，重新生成即可。

在仓库中添加 secret

将上面新创建的 Token 添加到 GitHub 仓库的 Secrets 里，并将这个新增的 secret 命名为NIGO_DEV （名字无所谓，看你喜欢）。

步骤：仓库 -> settings -> Secrets -> New repository secret。

图片image.png

创建 Actions 配置文件

  1. 在项目根目录下创建 .github 目录。
  2. 在 .github 目录下创建 workflows 目录。
  3. 在 workflows 目录下创建 deploy.yml 文件。

图片image.png

修改 deploy.yml 文件，添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
name: deploy

on:
  push:
    branches: [master] # master 分支有 push 时触发

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node.js v14.x
        uses: actions/setup-node@v1
        with:
          node-version: '14.x'

      - name: Install
        run: yarn install # 安装依赖

      - name: Build
        run: npm run build # 打包

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3 # 使用部署到 GitHub pages 的 action
        with:
          publish_dir: ./dist # 部署打包后的 dist 目录
          github_token: ${{ secrets.NIGO_DEV }} # secret 名
          user_name: ${{ secrets.MY_USER_NAME }}
          user_email: ${{ secrets.MY_USER_EMAIL }}
          commit_message: Update # 部署时的 git 提交信息，自由填写


接着只要提交修改代码，Github Actions就会运行自动部署

图片image.png

这里部署后的代码会放到gh-pages分支，gh-pages分支是自动创建的

github仓库 -> settings -> pages 读取gh-pages分支，然后访问shinewen189.github.io/nigo-cli/[10]

图片image.png

自动部署只是 GitHub Actions 功能一小部分，GitHub Actions 能做的事还很多很多，感兴趣的同学自行查阅。

码云项目构建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
登录注册后（可以使用微信，qq等）

1、进入首页点击新建仓库
2、填写仓库名，仓库介绍
3、选择开源私有
4、初始化仓库
	-语言： 根据自已项目选择对应的开发语言。
	-gitignore： 选择对应的模板，我们提交代码，如配置文件类的东西，都可以为我们忽略掉。我们的项目就不会提交很多垃圾。目前我们主要使用的是maven开发就选择maven。
	-开源许可证： 只是一个开源的协议，根据自已的项目来。一般选择Apache-2.0 就可以了
	-生产/开发模型(支持 master/develop 类型分支)： 开发的时候在dev分支，开发完成后合并到master分支。

5、设置模板
	可以添加 Readme、issue、Pull Request 模板文件
6、选择分支
	

经过以上步骤创建好仓库后，点击复制仓库地址这里选用https的地址就可以了



Git配置多个SSH-Key

背景
当有多个git账号时，比如：

a. 一个gitee，用于公司内部的工作开发；
b. 一个github，用于自己进行一些开发活动；

解决方法

生成一个公司用的SSH-Key
$ ssh-keygen -t rsa -C 'xxxxx@company.com' // 不指定路径会提示
$ ssh-keygen -t rsa -C 'xxxxx@company.com' -f ~/.ssh/gitee_id_rsa 
// 指定路径不对会报错 Saving key "~/.ssh/gitee_id_rsa" failed: No such file or directory

生成一个github用的SSH-Key
$ ssh-keygen -t rsa -C 'xxxxx@qq.com' -f ~/.ssh/github_id_rsa

在 ~/.ssh 目录下新建一个config文件，添加如下内容（其中Host和HostName填写git服务器的域名，IdentityFile指定私钥的路径）

// config
    # gitee
    Host gitee.com
    HostName gitee.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/gitee_id_rsa
    # github
    Host github.com
    HostName github.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/github_id_rsa

    
添加公钥

    
4.用ssh命令分别测试

 ssh -T git@gitee.com
 ssh -T git@github.com

以 gitee 仓库为例，添加成功显示
C:\WINDOWS\system32>ssh -T git@gitee.com
Enter passphrase for key 'C:\Users\19507/.ssh/gitee_id_rsa':
Hi 光背天盖仰头望! You've successfully authenticated, but GITEE.COM does not provide shell access.

最后

一套完整的前端工程架构方案，需要考虑技术选型、区分环境、代码规范、提交规范、测试、自动部署等等。本项目对于每项技术栈只是提供较为基础的配置，同学们可以按照自己的需求对本项目每个技术栈展开研究或针对性配置，找出自己最适合的工程化方案。

最后再贴上项目地址

github: wyf195075595/github.io/github-actions-demo

gitee: https://wangyf1024.gitee.io/

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。