# case001

**Repository Path**: usaliva/case001

## Basic Information

- **Project Name**: case001
- **Description**: 使用 Webpack 实现简单的 Vue 项目打包任务
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-04
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 作业讲解

## 安装模块

根据使用安装模块

- webpack
- webpack-cli
- webpack-dev-server
- webpack-merge
- webpack插件
  - copy-webpack-plugin
  - clean-webpack-plugin
  - html-webpack-plugin
- webpack加载器
  - less-loader css-loader style-loader
  - url-loader file-loader
- eslint
  - eslint
  - eslint-loader
  - eslint-plugin-vue 配置中使用的扩展
  - babel-eslint 配置中使用的解析器
- babel
  - @vue/cli-plugin-babel 配置中使用的preset
    - 该集合中集成了@babel/core和babel-loader，项目中不用单独安装
- 框架
  - vue 需安装到 dependencies
  - vue-loader 需配合 vue-template-compiler 使用

## vue-loader

vue-loader加载器可以解析处理vue单文件组件（SFC）。

它可以将vue组件解析的每个部分使用对应的loader，例如sytle标签使用sass，template标签使用pub。

具体过程：

1. 通过编译器，将vue中template、script、style标签中的内容提取，转化为导入导出的方式，用type参数区分使用的loader

   ```js
   // source.vue会被处理为：
    
   // import the <template> block
   import render from 'source.vue?vue&type=template'
   // import the <script> block
   import script from 'source.vue?vue&type=script'
   export * from 'source.vue?vue&type=script'
   // import <style> blocks
   import 'source.vue?vue&type=style&index=1'
    
   script.render = render
   export default script
   ```

2. VueLoaderPlugin插件会克隆webpack中的rules，并根据`type`去执行对应的rules。例如：

   ```js
   // webpack中配置了babel-loader
   // import script from 'source.vue?vue&type=script'
   // 会被扩展为：
   import script from 'babel-loader!vue-loader!source.vue?vue&type=script'
   ```

它还提供vue的HMR热替换功能。（需要webpack开启HMR）

### 安装

vue-loader 依赖 tempalte 编译器 vue-template-compiler

`npm install vue-loader vue-template-compiler -D`

### webpack配置

vue-loader的使用除了在rules中配置加载器，还 **必须** 在plugins中添加它的插件。

插件负责复制其他loader，并将它们应用于 .vue文件 中对应的语言块。

```js
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // vue-loader插件会将这个规则应用于<script>标签中的内容
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // vue-loader插件会将这个规则应用于<style>标签中的内容
      {
        test: /\.css$/,
        use: [
          // vue-style-loader与style-loader类似，vue-loader内部集成了它，可以直接使用
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}
```

## 配置webpack

先在webpack.common.js中配置好一个开发环境的配置，并用`--config`命令在执行webpack和webpack-dev-sever是指定配置文件。

```json
{
  //...
  "scripts": {
    "serve": "webpack-dev-server --config webpack.common.js",
    "build": "webpack --config webpack.common.js",
    "lint": "eslint ./*.js"
  },
}
```

### 基本配置

先配置能让项目运行的基础配置：

```js
const path = require('path')

const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'none',
  devtool: 'source-map',
  entry: './src/main.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  devServer: {
    hot: true // 开启webpack hmr，使vue-loader的hot-reload开启
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // 忽略编译node_modules中的模块
        use: [
          'babel-loader', // 添加babel编译,使用??[空位合并操作符]语法测试配置是否成功
          'eslint-loader' // 添加eslint校验
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
        ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ]
      },
      {
        test: /\.(png|jpg|jpeg|git)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024,
            // file-loader会将通过方法导图的资源编译为一个JS模块代码
            // esModule默认为true,表示file-loader将资源用ESM方式导出
            // 改为false，file-loader会以CommonJS方式导出的资源
            // vue-loader将模板中引入的资源例如（src的图片）转换commonjs方式导入（require）
            esModule: false,
          }
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        // 指定拷贝ico文件,避免拷贝html模板,导致生成的html被覆盖
        'public/favicon.ico',
      ],
    }),
    new VueLoaderPlugin(), // vue-loader使用必要插件
    new webpack.DefinePlugin({
      BASE_URL: '"./"'
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      title: '不成器的作业...'
    })
  ],
}
```

## 添加功能

安装模块

- stylelint
  - stylelint
  - stylelint-config-recommended sylelint规则配置
  - styleint-webpack-plugin webpack使用stylelint的插件
- postcss 使用postcss的autoprefixer添加css前缀
  - postcss-loader 内部自动安装autoprefixer
    - autoprefixer查询浏览器的配置使用当前项目package.json中已有的browserslist
    - 新建一个postcss.config.js配置文件，plugins中加载autoprefixer模块

```js
const path = require('path')

const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const StylelintPlugin = require('stylelint-webpack-plugin')

module.exports = {
  mode: 'none',
  devtool: 'source-map',
  entry: './src/main.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  devServer: {
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          // 'eslint-loader'
        ]
      },
      {
        test: /\.js$/,
        use: [
          'eslint-loader'
        ],
        enforce: 'pre' // 保证js优先（主要在编译前）执行eslint-loader
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'less-loader',
        ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
        ]
      },
      {
        test: /\.(png|jpg|jpeg|git)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024,
            esModule: false,
          }
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        'public/favicon.ico',
      ],
    }),
    new VueLoaderPlugin(),
    // 增加stylelint的css校验
    new StylelintPlugin({
      files: ['src/**.{vue,html,css,less}'], // 监听的文件
      fix: false, // 禁止自动修复
      cache: false, // 禁止缓存
      emitError: true, // 发出错误
      failOnError: false, // 禁止校验失败停止构建
    }),
    new webpack.DefinePlugin({
      BASE_URL: '"./"'
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      title: '不成器的作业...'
    })
  ],
}
```

## 区分环境 & 打包优化

### 区分环境配置

将common中的配置按照开发环境和生产环境区分开。

- common
  - 入口文件
  - loader及配合的插件
  - 插件：生成html、定义全局成员
  - resolve.extensions扩展名支持
- 开发环境
  - devServer + HMR
  - source map
  - 输出路径（不需要hash）
  - noEmitOnErrors 开发阶段（运行devServer时）遇到错误不会跳出进程
- 生产环境
  - 输出路径（带hash）
  - 插件：清除打包目录、拷贝静态资源

并修改相应脚本

```json
{
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js --progress --open",
    "build": "webpack --config webpack.prod.js --progress",
    "lint": "eslint ./*.js"
  },
}
```

- `--progress` 显示打包进度条
- `--open` 打开浏览器窗口

### 打包结果优化

1. 配置`optimization.usedExports` 实现Tree Shaking功能
2. 配置`optimization.splitChunks` 提取公共模块
3. 使用 mini-css-extract-plugin 提取css文件
4. 压缩CSS JS
5. 多线程执行打包任务

需要安装的模块：

- mini-css-extract-plugin
- terser-webpack-plugin
- optimize-css-assets-webpack-plugin
- thread-loader 为加载器单独创建线程（适合大型项目，当前作业反而多余）

### 打包过程优化

- friendly-errors-webpack-plugin 打包信息优化
- speed-measure-webpack-plugin 查看打包过程各阶段花费时间
- webpack-bundle-analyzer 可视化webpack输出文件的大小。
  - webpack打包会打印出一组统计信息，包括bundle chunk以及它们的耗时信息。
  - 使用analyzer将它们以交互式树图可视化方式展示在浏览器中

### 最终结果

```json
// package.json
{
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js --progress --open",
    "build": "webpack --config webpack.prod.js --progress",
    "build-speed": "webpack --config webpack.prod.js --progress --speed",
    "build-analyzer": "webpack --config webpack.prod.js --progress --analyzer",
    "lint": "eslint ."
  },
}
```



```js
// common
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const StylelintPlugin = require('stylelint-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

module.exports = env => {
  // css loader
  const cssLoader = [
    // 生产环境提取css到文件
    env === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
    'css-loader',
    'postcss-loader',
  ]

  // 根据env添加的插件
  const plugins = []
  if (env === 'production') {
    plugins.push(new MiniCssExtractPlugin())
  }

  return {
    mode: 'none',
    entry: './src/main.js',
    module: {
      rules: [
        {
          test: /\.less$/,
          use: [
            ...cssLoader,
            'less-loader',
          ]
        },
        {
          test: /\.css$/,
          use: [
            ...cssLoader,
          ]
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            // 'thread-loader',
            'babel-loader',
            'eslint-loader',
          ]
        },
        {
          test: /\.(png|jpg|jpeg|git)$/,
          use: {
            loader: 'url-loader',
            options: {
              limit: 10 * 1024,
              esModule: false,
            }
          }
        },
        {
          test: /\.vue$/,
          use: [
            // 'thread-loader',
            'vue-loader',
          ]
        }
      ]
    },
    plugins: [
      ...plugins,
      new VueLoaderPlugin(),
      new StylelintPlugin({
        files: ['src/**.{vue,html,css,less}'],
        fix: false,
        cache: false,
        emitError: true,
        failOnError: false,
      }),
      new HtmlWebpackPlugin({
        template: './public/index.html',
        title: '不成器的作业...'
      }),
      new webpack.DefinePlugin({
        BASE_URL: '"./"'
      }),
      // 优化打包提示
      new FriendlyErrorsPlugin(),
    ],
    resolve: {
      extensions: ['.js', '.json', '.vue']
    }
  }
}
```

```js
// dev
const path = require('path')
const merge = require('webpack-merge')
const common = require('./webpack.common')()

module.exports = merge(common, {
  mode: 'development',
  devtool: 'source-map',
  devServer: {
    hot: true,
    contentBase: './public',
    quiet: true, // 防止命令行终端打印webpack信息（已使用插件展示）
    clientLogLevel: 'error', // 在浏览器控制台只打印hmr后触发的error信息
    overlay: true, // 将错误信息用一个遮罩展示在页面中
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  optimization: {
    noEmitOnErrors: true, // 开发阶段防止错误中断进程
  }
})


```

## Git Hooks + ESLint

使用`npx mrm lint-staged`快速安装并配置husky和lint-staged

使用`npx mrm gitignore`创建gitignore文件

调整package.json

```json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**.(js|vue)": "eslint"
  }
}
```

## eslint-loader使用问题

本作业一开始将eslint-loader同babel-loader放在同一个rule下：

```js
{
  test: '/\.js$/',
  exclude: /node_modules/,
  use: [
    'babel-loader',
    'eslint-loader'
  ]
},
{
  test: /\.vue$/,
    use: [
      'vue-loader',
    ]
}
```

理论上eslint-loader应该可以校验vue-loader处理vue文件获得的js代码。

但是结果并没有。又采取了以下方案:

1. 去掉exclude（虽然babel编译报错，但eslint还是没有校验）

2. 为eslint-loader单独写一个rule，依然无效（代码中exclude和enforce写不写都无效）

   ```js
   {
     test: /\.js$/,
     use: [
       'eslint-loader',
     ],
     // exclude: /node_modules/,
     // enforce: 'pre',
   },
   ```

最终没有找到原因，老老实实的给vue匹配加了个rule

```js
{
  test: /\.(js|vue)$/,
  use: [
    'eslint-loader',
  ],
  enforce: 'pre' // 必须加，保证编译前执行
},
```

### 正确答案

zce老师帮忙的正确解答: https://github.com/lagoufed/fed-e-001/issues/2

VueLoaderPlugin插件的源码中，选择性的忽略了eslint-loader。

```js
const dedupeESLintLoader = loaders => {
  const res = []
  let seen = false
  loaders.forEach(l => {
    if (!isESLintLoader(l)) {
      res.push(l)
    } else if (!seen) {
      seen = true
      res.push(l)
    }
  })
  return res
}
```