webpack+vue项目【第五期】

一、新增一个页面src/views/page-v5/page-v5.vue

内容如下：

<template>
  <div class="page-v5">babel学习使用</div>
</template>

<script>
export default {
  name: 'page-v5',
  data() {
    return {
      obj: {
        id: 1,
        name: 'babel学习使用',
      },
      list: ['es6 => es5 1', 'es6 => es5 2', 'es6 => es5 3'],
    };
  },
  mounted() {
    this.sayHello();
  },
  methods: {
    sayHello() {
      const { name } = this.obj;
      const list = [...this.list];
      const fn = (name, list) => {
        console.log(name, ':\n', list);
      };
      fn(name, list);
    },
  },
};
</script>

<style></style>

在不引入babel-loader的情况下进行打包输出页面page-v5.vue输出js内容如下：

image.png

二、引入babel-loader

1. Loads ES2015+ code and transpiles to ES5 using Babel
   大白话说，就是把es2015+代码转化为es5
2. 比如：
   // Babel Input: ES2015 arrow function
   [1, 2, 3].map(n => n + 1);
   // Babel Output: ES5 equivalent
   [1, 2, 3].map(function(n) {
   return n + 1;
   });
3. 安装命令：
   3.1 yarn add babel-loader @babel/core @babel/preset-env --dev
   3.2 yarn add @babel/plugin-transform-runtime --dev
   3.3 yarn add @babel/runtime
4. 配置如下：
   4.1 项目根目录下面新增浏览器版本支持列表.browserslistrc文件，内容如下:

1%
last 2 versions
not ie <= 8
not dead

4.2 在webpack.common.js新增一条rule配置项：
默认情况下@babel/preset-env 将会读取.browserslistrc文件，除非手动设置浏览器目标targets环境。

{
 test: /\.js$/i,
 exclude: /(node_modules|bower_components)/,
 use: {
   loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime'],
   },
 },
 },

打包之后dist/js/文件下面没有const、let、箭头函数、扩展运算符等

image.png

image.png

5 配置说明：
5.1.browserslistrc配置文件指定了浏览器的版本范围，@babel/preset-env用来确定需要转译的JavaScript新特性。
5.2 '@babel/plugin-transform-runtime'这个插件是用来抽取在babel转化代码过程中用到的公共辅助函数，提取到runtime.js文件中。
5.3 最重要的一点是，一定要设置目标浏览器范围，如果没有设置，是不会彻底进行es6+转化为es5代码滴

三、拷贝源文件至dist输出目录

1. 源文件的拷贝，需要安装插件 copy-webpack-plugin
   yarn add copy-webpack-plugin --dev
2. 拷贝public/favicon.ico至dist/目录

实现方式如下：

3. 方式一

webpack.prod.js文件添加如下代码

const CopyWebpackPlugin = require('copy-webpack-plugin');

// plugins添加该插件
new CopyWebpackPlugin({
      patterns: [
        {
          from: '../public/favicon.ico',
          to: '../dist/',
        },
      ],
    }),

如果出现如下错误，是文件类型输出有错误导致的！

// 这种写法会报下面的错误，toType指定后，一定要设置具体的文件名称及后缀！！！
new CopyWebpackPlugin({
      patterns: [
        {
          from: '../public/favicon.ico',
          to: '../dist/',
          toType: 'file',
        },
      ],
    }),

image.png

而下面的这种写法也是ok的

new CopyWebpackPlugin({
      patterns: [
        {
          from: '../public/favicon.ico',
          to: '../dist/favicon.ico',
          toType: 'file',
        },
      ],
    }),

四、postcss-loader的使用

1. 添加浏览器兼容的前缀
   原理：.browserslistrc 指定了项目的目标浏览器的范围。这个值会被 autoprefixer 用来确定需要添加的 CSS 浏览器前缀。
   有2种方式为css添加浏览器供应商前缀：
   第一种，安装 autoprefixer插件；
   第二种，安装 postcss-preset-env，因为
   postcss-preset-env includes autoprefixer, so adding it separately is not necessary if you already use the preset. More information

1.2 安装相关开发依赖
yarn add postcss postcss-loader postcss-preset-env --dev
由于安装postcss-preset-env插件时，会自动安装autoprefixer插件，故无需再次安装autoprefixer插件
1.3 根目录添加配置文件postcss.config.js

// 添加浏览器供应商前缀方式一
module.exports = {
  plugins: [
    ['postcss-preset-env', {}],
  ],
};

// 添加浏览器供应商前缀方式二
module.exports = {
  plugins: [
    ['autoprefixer', {}],
  ],
};

1.4 删除根目录下目标浏览器版本.browserslistrc配置中的 not dead

> 1%
last 2 versions
not ie <= 8

1.5 在webpack.config.prod.js、 webpack.config.dev.js配置文件中分别新增post-loader插件

// 生产环境
  {
        test: /\.(less|css)$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: false,
            },
          },
          'postcss-loader',
          'less-loader',
        ],
 },

// 开发环境
{
    test: /\.(less|css)$/i,
    use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
 },

五、总接及对比

1. src目录下面新增一个utils工具函数，分别在login.vue、page-v1.vue、page-v5.vue页面中引入某个或者多个函数，结果把该工具函数分别都打包进这3个页面，这个地方如何进行优化呢 ？
2. 通过vue-cli生成一个项目vue-manal-cli，把vue-manal里面的内容全部复制到脚手架项目中，进行对比发现，脚手架对于utils导入的处理一样。
3. vue-cli脚手架并没有把运行时runtime代码抽离出来，但是脚手架通过prefetch，把dist/下面的css、js添加到入口index.html页面里面了。这是一种性能优化；手动打包生成的项目，页面对应的js、css是按需动态写入到head标签里面的。

5. 手动打包项目和vue-cli脚手架打包生成项目对比
   一、手动打包生成的项目页面 page-v5如下：

   
   
   image.png
   
   
   image.png

二、vue-cli脚手架打包生成的项目页面 page-v5如下：

image.png

image.png

六、项目地址：

1. 代码仓库地址：https://github.com/YiGeXiaoBing-520/vue-manual.git
   克隆代码后，切换至第五期对应的分支
   第五期分支代码： develop-v5；
2. vue-cli脚手架生成的项目地址
   https://github.com/YiGeXiaoBing-520/vue-manual.git
   克隆代码后，切换至vue-manual-cli分支；
   备至：其他分支的代码非脚手架生成的代码，main分支为最新代码

七、手动搭建webpack5 + vue2 项目

1. 后续优化会继续进行，项目才刚刚开始而已；
2. 加入typescript进行混合开发，适用于老项目在兼容旧版本js开发的前提下引入ts进行改造升级；
3. utils等类似的工具函数按需导入的优化工作等。
4. 未完待续....