如何支持 IE

.browserslistrc
[production] # 正式环境
> 1% # 支持全世界大于1%的浏览器
ie 9

[modern] # 开发环境
last 1 chrome version
last 1 firefox version

[ssr]
node 12

用 babel-loader 打包 JS

其实 webpack 就可以打包 JS 了，为什么还要用 babel-loader 呢？因为他的功能更强大，

npm install -D babel-loader @babel/core @babel/preset-env webpac

// webpack.config.js

module.exports = {
  node: 'production',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

用 babel-loader 打包 JSX

babel-preset-react

npm install --save-dev @babel/preset-react

"presets": ["@babel/preset-react"]

给 webpack 配置 ESLint 插件

• 让编辑器提示

yarn add -D babel-eslint eslint eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

// .eslintrc.js
module.exports = {
  extends: ['react-app'],
  rules: {
    // 0 忽略 ，1 警告， 2 报错
    'react/jsx-uses-react': [2],
    // 提示要在 JSX 文件里手动引入 React
    'react/react-in-jsx-scope': [2]
  }
}

• 让 webpack 提示

yarn add - D eslint-webpack-plugin

const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = {
  mode: 'production',
  plugins: [
    new ESLintPlugin({
      extensions: ['.js', '.jsx']
    })
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env'],
              ['@babel/preset-react', {runtime: 'classic'}],
            ],
          }
        }
      }
    ]
  }
}

如何使用 babel-loader 打包 TypeScript

yarn add -D @babel/preset-typescript

"presets": ["@babel/preset-typescript"]

让 ESLint 支持 TS

为什么不用 TSLint？因为作者不维护了

yarn add -D @typescript-eslint/eslint-plugin eslint-config-airbnb-typescript typescript

module.exports = {
  // ...
  overrides: [{
    files: ['*.ts', '*.tsx'],
    parserOptions: {
      project: './tsconfig.json',
    },
    extends: ['airbnb-typescript'],
    rules: {
      '@typescript-eslint/object-curly-spacing': [0],
      'import/prefer-default-export': [0],
    },
  }],
}

让 babel-loader 支持 TSX

yarn add -D @types/react

// tsconfig.json
"jsx": "react"

支持 alias

• 让 JS 支持 @

const path = require('path')
const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src/')
    },
  },
}

• 让 TS 支持 @

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  }
}

支持 SCSS

yarn add -D css-loader sass sass-loader style-loader

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      }
    ]
  }
}

让 scss 自动 import

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
         {
            loader: 'sass-loader',
            options: {
              additionalData: `@import "~@/scss-vars.scss";`,
              sassOptions: {
                includePaths: [__dirname]
              }
            },
        ],
      }
    ]
  }
}

scss 分享变量给 JS

// 最好新建一个文件
:export {
  color: $color;
}

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
         {
            loader: 'css-loader',
            options: {
              modules: {
                compileType: 'icss',
              },
            },
          },
         {
            loader: 'sass-loader',
            options: {
              additionalData: `@import "~@/scss-vars.scss";`,
              sassOptions: {
                includePaths: [__dirname]
              }
            },
        ],
      }
    ]
  }
}

支持 Less

yarn add -D less less-loader

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                compileType: 'icss',
              }
            },
          },
          'less-loader',
        ]
      },
    ]
  }
}

让 less 自动 import

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                compileType: 'icss',
              }
            },
          },
          {
            loader: 'less-loader',
            options: {
              additionalData: `@import "~@/less-vars.less";`,
              lessOptions: {
                includePaths: [__dirname]
              }
            },
          },
        ]
      },
    ]
  }
}

分享 Less 变量给 JS

和 scss 同理

支持 stylus

yarn add -D stylus stylus-loader

  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.styl(us)?$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                compileType: 'icss',
              }
            },
          },
          'stylus-loader',
        ]
      },
    ]
  }
}

让 stylus 自动 import

{
        test: /\.styl(us)?$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                compileType: 'icss',
              }
            },
          },
          {
            loader: 'stylus-loader',
            options: {
              stylusOptions: {
                import: [path.resolve(__dirname, 'src/stylus-vars.styl')]
              }
            },
          }
        ]
      },

分享 stylus 变量给 JS

同理

提取 CSS，并且文件加 hash

npm install --save-dev mini-css-extract-plugin

plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    }),
  ],

const createLoader = (...loaders) => [
  mode === 'production' ?
    MiniCssExtractPlugin.loader:
    'style-loader',
  {
    loader: 'css-loader',
    options: {
      modules: {
        compileType: 'icss',
      }
    },
  },
  ...loaders
]

自动生成 HTML

yarn add -D html-webpack-plugin

plugins: [
    new HtmlWebpackPlugin()
  ],

给 JS 文件加 hash

module.exports = {
  output: {
    filename: '[name].[contenthash].js'
  },
}