配置React工程化环境

通过手动配置React开发环境了解常用webpack的loader & plugin。

处理常见资源

众所周知，webpack只能识别js，其他文件如果直接引入是无法识别的，那么就需要借助loader & plugin的能力帮助webpack处理这些文件。

1. 图片资源
   1. File-loader
      在JS代码中import/require文件时，会将该文件生成到输出目录,默认文件名是哈希值，可以自定义文件名。

{
    test: /\.(png|jpg|gif)$/,
    use: {
        loader: 'file-loader',
        options: {
            name: '[name].[ext]',
            outputPath: 'images',
        }
    }
},

1. Url-loader
   功能与File-loader类似，但是在设定limit字段后，当引入的文件小于指定大小会将文件转为Base64格式。

{
    test: /\.(png|jpg|gif)$/i,
    use: [{
      loader: 'url-loader',
      options: {
        limit: 8192,
      },
    }]
}

1. svg-inline-loader
   会将 SVG 文件内联为模块。
2. css文件
   1. Css-loader
      解析@import/url()引入的文件。

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

1. style-loader
   配合css-loader使用，将css插入到dom中。
2. html文件
   1. HtmlWebpackPlugin
      当使用webpack打包时，创建 / 引用一个html 文件，并把webpack 打包后的静态文件自动插入到这个html 文件当中。

new HtmlWebpackPlugin({
    template: '/public/index.html'
})

1. jsx or tsx
   1. Babel-loader + @babel/preset-react / @babel/preset-typescript
      将jsx / tsx文件使用babel-loader，React 预设规则集 @babel/preset-react ，完成 JSX 到 JS 的转换。

{
    test: /\.tsx$/,
    loader: 'babel-loader',
    options: {
        presets: [['@babel/preset-react', {
            'runtime': 'automatic'
        }], "@babel/preset-typescript"]
    }
}

1. vue
2. vue-loader vue单文件的解析

const { VueLoaderPlugin } = require('vue-loader')
{
    test: /\.vue$/,
    use: ['vue-loader']
}
plugins: [ new VueLoaderPlugin() ]

热更新

安装 webpack-dev-server， 如下配置

devServer: {
    hot: true,
    open: true
}

代码规范

• Eslint
  js语法检测

// .eslintrc.js
module.exports = {
    extends: [
        // 启用Eslint推荐规则
        'eslint:recommended',
        // 启用React推荐规则
        'plugin:react/recommended',
    ],
    overrides: [
        {
            // 对ts tsx调用如下配置进行处理 关闭一些处理规则
            files: ['*.ts', '*.tsx'],
            extends: [
                'plugin:@typescript-eslint/eslint-recommended',
                'plugin:@typescript-eslint/recommended'
            ],
            parser: '@typescript-eslint/parser',
            plugins: [
                '@typescript-eslint/eslint-plugin',
            ],
            rules: {
                '@typescript-eslint/ban-ts-ignore': 'off',
                '@typescript-eslint/no-explicit-any': 'off',
                '@typescript-eslint/no-use-before-define': 'off'
            },
        }
    ],
    // 自动设置检查的React版本是安装的React的版本
    settings: {
        react: {
            version: 'detect',
        }
    },
    rules: {
        'react/jsx-no-undef': 'off'
    },
    // 表示支持browser、es2020、node、commonjs中预定义的全局变量
    env: {
        browser: true,
        es2020: true,
        node: true,
        commonjs: true,
    },
    //配置之前的步骤中设置的全局变量，比如React
    globals: {
        React: true,
        ReduxConnect: true,
        Axios: true,
        UseEffect: true,
    },
    ignorePatterns: ['dist/'],
}

• stylelint
  样式文件语法检测。

module.exports = {
  extends: ['stylelint-config-standard'],
  plugins: ["stylelint-order"],
  rules:{
    'no-descending-specificity':null,
    'function-url-quotes': 'always',
    'string-quotes': 'double', 
    'indentation': 2,
    'unit-case':null,
    'color-hex-case': 'upper',
    'color-hex-length': 'long',
    'rule-empty-line-before': 'never',
    'font-family-no-missing-generic-family-keyword': null,
    'block-opening-brace-space-before':'always',
    'property-no-unknown':null,
    'no-empty-source':null,
   
    "order/properties-order": [

      //css内容'content',
      'counter-increment',
      'counter-reset',
      'quotes',
      'crop',
      'move-to',
      'page-policy',
      ...
    ]
  } 
}

git提交

• 配置commitlint

帮我们检查 git commit 所提交信息是否符合conventional commit format的工具

module.exports = {
    extends: ['@commitlint/config-angular'],
    rules: {
        'type-enum': [
            2,
            'always',
            [
                'WIP',      // 开发中
                'feat',     // 新特性
                'improvement', // 加强现有特性
                'fix',      // 修补bug
                'refactor', // 重构
                'docs',     // 文档
                'test',     // 单元测试
                'config',   // 配置文件
                'style',    // 格式需改
                'perf',     // 性能提升
                'ci',       // ci
                'revert',   // 版本回退
                'chore',    // 其他修改
            ],
        ],
        'type-empty': [2, 'never'],               // type不能为空
        'type-case': [0, 'always', 'lower-case'], // type不限制大小写
        'subject-empty': [2, 'never'],            // subject（简短得描述）不能为空
        'subject-max-length': [1, 'always', 50],  // subject最大长度，超出只会警告，不阻止提交
        'body-leading-blank': [1, 'always'],
                'footer-leading-blank': [1, 'always'],
                'header-max-length': [2, 'always', 72],
      }
};

• 安装husky

帮我们每次 git 提交时自动执行检查

// packge.json
"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
},

Create-react-app

有关create-react-app中用到的插件和loader

Plugin

• html-webpack-plugin

当使用webpack打包时，创建 / 引用一个html 文件，并把webpack 打包后的静态文件自动插入到这个html 文件当中

• case-sensitive-paths-webpack-plugin

如果路径有误则直接报错

• terser-webpack-plugin

使用terser压缩JS代码

• mini-css-extract-plugin

将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap

• css-minimizer-webpack-plugin

使用 cssnano 优化和压缩 CSS

• webpack-manifest-plugin

生产资产的显示清单文件

• workbox-webpack-plugin

自动生成 Service Worker 和 静态资源列表 用于PWA

• eslint-webpack-plugin

Loader

• Css-loader

处理css文件

• Style-loader

将css插入dom

• Postcss-loader

使用PostCSS处理CSS 可以补全兼容性前缀

• resolve-url-loader

可基于原始源文件解析 url （）语句中的相对路径

• source-map-loader

将源代码与打包过的代码建立映射关系

• @svgr/webpack

支持svg作为组件引入

• file-loader

在JS代码中import/require文件时，会将该文件生成到输出目录,默认文件名是哈希值，可以自定义文件名

• babel-loader

es6 -> es5

• sass-loader

处理sass 、scss