为什么需要构建工具

配置

Loader

module.exports = {
    module: {
        rules: [
            {
                test: /正则表达式/,
                use: 'xxx-loader'
            }, {
                test: /正则表达式/,
                use: ['xxx-loader', 'xxx-loader']
            },{
                test: /正则表达式/,
                use: {
                    loader: 'xxx-loader',
                    options: {
                        presets: ['xxx']
                    },
                }
            }
        ]
    }
}

• babel-loader

  • @babel/core @babel/preset-env @babel/preset-react

  {
      // jsx
      test: /\\.jsx?$/i,
      use: {
          loader: 'babel-loader',
          options: {
              presets: ['@babel/preset-react']
          }
      }
  }
  

• style-loader

  • css-loader

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

  • less-loader

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

• url-loader

  {
      // 图片
      test: /\\.(png|jpg|gif)$/i,
      use: {
          loader: 'url-loader',
          options: {
              outputPath: 'imgs/',
              publicPath: 'build/imgs/',
              limit: 10*1024 // KB
          }
      }
  }
  

  {
      // 字体
      test: /\\.(eot|svg|ttf|woff|woff2)$/i,
      use: {
          loader: 'url-loader',
          options: {
              outputPath: 'fonts/',
              publicPath: 'build/fonts/',
              limit: 10*1024 // KB
          }
      }
  }
  

• file-loader

Lint 代码静态检查

• StyleLint
  • stylelint stylelint-config-standard stylelint-webpack-plugin
• ESLit