webpack搭建vue3教程-超级篇

webpack搭建vue3教程-超级篇

一.配置vue-router:

1.安装依赖：

npm install vue-router@4 -S

2.配置router:

src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
import Home from './Home.vue';
import Me from './Me.vue';

const routerHistory = createWebHistory();
const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/home',
            name: 'Home',
            component: Home
        },
        {
            path: '/me',
            name: 'Me',
            component: Me
        }
    ]
});

export default router;

3.使用router:

在index.js导入router:

import router from './router.js';

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

二.配置vuex：

1.安装依赖：

npm install vuex@next -S

2.配置：

src/store/index.js

import { createStore } from "vuex";

const store = createStore({
    state: {
        name: 'vuex'
    },
    getters: {},
    actions: {},
    mutations: {},
    modules: {}
});

export default store;

3.使用：

import store from "./store/index.js";

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

三.使用ui框架（vant）：

1.安装依赖：

npm install vant@next -S

2.按需导入：

npm i babel-plugin-import ts-import-plugin -D

3.配置：

js版本

// babel.config.js
module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true,
      },
      'vant',
    ],
  ]
};

ts版本

const tsImportPluginFactory = require('ts-import-plugin');
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.ts$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
              getCustomTransformers: () => ({
                before: [
                  tsImportPluginFactory({
                    libraryName: 'vant',
                    libraryDirectory: 'es',
                    style: (name) => `${name}/style/less`,
                  }),
                ],
              }),
              compilerOptions: {
                module: 'es2015',
              },
            }
          },
        ],
        exclude: /node_modules/
      },
      // ...
    ],
  }
};

四.rem布局适配：

1.安装依赖：

npm install lib-flexible  -S
npm install postcss-pxtorem -D

2.配置：

//.postcssrc.js
module.exports = {
    plugins:{
        // autoprefixer: {
        //     browsers: ['Android >= 4.0', 'iOS >= 8']
        // },
        'postcss-pxtorem': {
            // rootValue: 37.5, // Vant 官方根字体大小是 37.5
            rootValue({file}) {
                return file.indexOf('vant') !== -1 ? 37.5 : 75
            },
            propList: ['*'],
            selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
        }
    },
}

// package.json
{
  // ...
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "Android >= 4.0",
    "iOS >= 8"
  ]
}

3.使用：

//  src/index.js 
import 'lib-flexible/flexible';

五.打包友好提示：

1.安装依赖： 报错

npm install friendly-errors-webapck-plugin node-notifier -D

2.配置：

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const notifier = require('node-notifier');
const icon = path.join(__dirname, 'public/icon.jpg');


new FriendlyErrorsWebpackPlugin({
            onErrors: (severity, errors) => {
                notifier.notify({
                    title: 'webpack 编译失败了~',
                    message: `${severity} ${errors[0].name}`,
                    subtitle: errors[0].file || '',
                    icon,
                });
            },
        })

六.分析打包文件大小：

1.安装依赖：

npm install webpack-bundle-analyzer -D

2.配置：

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


 new BundleAnalyzerPlugin(),

七.打包速度：

1.安装依赖：报错

npm install speed-measure-webpack5-plugin -D

2.配置：

const SpeedMeasureWebpack5Plugin = require('speed-measure-webpack5-plugin');
const smw = new SpeedMeasureWebpack5Plugin();

module.exports = smw({
    // options
})

八.缩小打包范围：

• exclude：排除某些文件，类似黑名单
• include：包含文件，类似白名单
• 优先度：exclude >>> include

1.配置：

 exclude: /node_modules/,
        include: path.resolve(__dirname, 'src')

九.配置缓存：

• 默认babel-loader中可以配置缓存
• 其他loader如果要缓存，需要下载cache-loader

1.安装依赖：报错 

npm install cache-loader -D

2.配置：

//babel-loader直接可以配置
{
                test: /.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                         cacheDirectory: true
                    }
                },
                 exclude: /node_modules/,
                 include: path.resolve(__dirname, 'src')
            },

//    其他loader中需要安装cache-loader
{
                test: /.css$/,
                use: [
                    'cache-loader',
                    'style-loader',
                    'css-loader'
                ]
            },

十.代码规范：

1.js代码规范：eslint

配置：.eslintrc.js

//.eslintrc.js
module.exports = {
  root: true, // 此项是用来告诉eslint找当前配置文件不能往父级查找
  env: {
    node: true, // 此项指定环境的全局变量，下面的配置指定为node环境
  },
  extends: ['plugin:vue/recommended', '@vue/prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/no-v-html': 'off',
  },
  parserOptions: {
    parser: 'babel-eslint',
    parser: 'babel-eslint',
    ecmaVersion: 7,
    sourceType: 'module',
    ecmaFeatures: {
      // 添加ES特性支持，使之能够识别ES6语法
      jsx: true,
    },
  },
  overrides: [],
};

配置.eslintignore

//.eslintignore
src/assets
src/icons
public
dist
node_modules

代码格式化：prettier

//prettier.config.js
module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,
  quoteProps: 'as-needed',
  jsxSingleQuote: false,
  trailingComma: 'es5',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'always',
  htmlWhitespaceSensitivity: 'ignore',
  vueIndentScriptAndStyle: true,
  endOfLine: 'lf',
}

2.css代码规范：stylelint

配置：.stylelintrc.js

//.stylelintrc.js
module.exports = {
  extends: ['stylelint-config-recess-order', 'stylelint-config-prettier'],
}

配置：.editorconfig

root = true
  
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
  
[*.md]
trim_trailing_whitespace = false

3.git提交校验代码规范：

安装依赖：

npm install -g commitizen cz-conventional-changelog

配置：

//package.json
"husky": {
      "hooks": {
        "commit-msg": "commitlint -e $GIT_PARAMS"
      }
  },

十一.自动化测试及发布：