码不停息

# my-vue-cli

my-vue-cli是我亲手从0到1搭建的仿vue-cli的脚手架,目的是为了学习webpack
项目地址:https://github.com/lyh0371/my-vue-cli

# 为什么造轮子

有人会问,为什么造轮子? vue-cli用着不香吗?
是挺香,但是没有自己造的香,哈哈

进入正题

# my-vue-cli 做了什么

  • 环境配置(开发环境,生产环境,检查环境)
  • 代码分离(css代码分离及压缩,js代码分离及压缩)
  • 开发环境源码调试
  • 设置不需要打包的文件
  • 自定义控制台输出
  • 优化打包体积及生产环境去掉console.log
  • 性能,文件体积分析
  • eslint+prettier控制代码风格

功能不多,但都是我亲手一点点配置出来的,下面对一些坑做重点说明

# css分割及压缩配置

webpack默认会把所有文件都一股脑打包成一个js,如果不做任何配置,我们写的css文件也会被打包在js文件里面,这样就会导致js文件越来越大,影响页面加载性能。 这时,对应的pulgin也就孕育而生。 mini-css-extract-plugin 需要注意的是这个插件只能在生产环境(production)下配置,并且在loader链中不是使用style-loader 配置代码: webpack.pro.js 配置loader

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // css 压缩
module:{
  rules:[
  ...
      {
          test: /\.css$/,
          use: [{
              loader: MiniCssExtractPlugin.loader,
              options: {
                  publicPath: '../',
              }

          }, "css-loader"]

            }
   ...
  ]
}

webpack.pro.js 配置plugin

plugins:[
...
  new MiniCssExtractPlugin({
    filename: './static/css/[name].[hash].css', //配置输出路径
  }),
...
]

使用 optimize-css-assets-webpack-plugin 进行代码压缩 配置代码: webpack.pro.js 配置plugin

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css插件
plugins:[
...
  new OptimizeCssAssetsPlugin(), //css压缩
...
]

# js按需加载配置

由于webpac会把所有文件一股脑都打包到一个js文件,包括我们引入的框架js文件,和我们自己写的整个项目的js文件,如不做任何配置,webpack会把他们都打包到一起,且在加载的时候一次性都加载完毕。 这就会导致如果我们项目过大,打包出来的js文件就会异常的大,影响首屏显示速度。 我们需要做的是:

  • 把使用的第三方js和我们的业务代码分离出来
  • 每个路页面的js按照路由的切换按需加载

配置代码: 分离出框架的js不需要任何插件,webpack4提供的有对应的配置

//第三方js和业务代码分离出来
module:{
...
optimization: {
  splitChunks: {
      cacheGroups: {
          venders: {
              test: /node_modules/,
              name: 'vendors',
              chunks: 'all'
          }
      }
  }
}
...
}

实现js按需加载需要配置我们路由文件 可能你的路由以前是这样写

import Vue from 'vue'
import Router from 'vue-router'
import Excal from '@/components/excal/Index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Excal',
      component: Excal
    }
  ]
})

现在需要改成这样

import Vue from "vue";
import Router from "vue-router";
const Hellow = () => import("root/components/hellow");
Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "Hellow",
      component: Hellow
    },
  ]
});

对应的webpack配置也需要更改 配置代码: webpack.base.js

test: /\.js$/,
exclude: /node_modules/,
use:[
    {
        loader: 'babel-loader', 
        options: {//如果有这个设置则不用再添加.babelrc文件进行配置
            "babelrc": false,// 不采用.babelrc的配置
            "plugins": [
                "@babel/plugin-syntax-dynamic-import"
            ]
        }
    }
]

如果不配置webpack直接使用import("root/components/hellow")会报错

# eslint+prettier的配置

使用eslint可以提高我们的代码质量,使用prettier可以规范我们的代码结构,再加上vscode一起使用,简直是大大提高了我们的劳动力! 使用之前你需要下载这么多插件(如果用vue-cli生成项目就要选择下eslint+prettier就可以使用啦

"eslint": "^6.8.0",
"eslint-config-prettier": "^6.9.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^3.0.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-vue": "^6.1.2",
"prettier": "^1.19.1",

新建三个文件.eslintrc.js(eslint配置文件).eslintignore(忽略文件),及.prettierrc.js(prettier配置文件) 配置代码: .eslintrc.js

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },

  env: {
    browser: true,
  },
  extends: ['plugin:vue/essential', 'plugin:prettier/recommended'],

  plugins: [
    'vue',
    'prettier'
  ],
  // add your custom rules here
  rules: {
    'prettier/prettier': 'error',
    //   'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off'
    'no-console': 0,
    "space-before-function-paren": [0, "never"]
  }
}

.eslintignore

/build/
/config/
/dis

.prettierrc.js

module.exports = {
    tabWidth: 2, // tab 占据两个空格
    semi: true, // 语句结尾的分号
};

以上配置也可根据自己喜好进行配置 对webpack进行配置 配置webpack.base.js

rules:[
  {
        test: /\.(js|vue)$/,
        exclude: '/node_modules/',
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src')],
        options: {
            formatter: require('eslint-friendly-formatter') // 把eslint 的报错信息显示在终端上
        }
    }
]

对vscode进行配置,实现当我们保存文件时自动按照规则格式化我们的代码
下载vscode插件 ESlint及Vetur,在vscode文件->首选项->设置中配置如下代码

"prettier.eslintIntegration": true,
 "eslint.autoFixOnSave": true,
 "editor.formatOnSave": true

重启vscode即可

# 其他配置

  • clean-webpack-plugin(build前删除上一次打包文件)
  • webpack-common-shake(项目瘦身,删除没有使用的代码块)
  • friendly-errors-webpack-plugin(自定义控制台输出)
  • webpack-bundle-analyze(分析webpack打包结果)
  • copy-webpack-plugin(处理不需要打包的文件)

以上pulgin比较好用,且使用起来比较简单,就不一一赘述了

← webpack优化 →