webpack学习2-常用loader

1. style-loader

作用：使得css样式写入html的head中 ，缺点是js打包很大，常和css-loader配合使用

用法：

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

2. css-loader

作用：css-loader会处理import / require（）/ @import / url 引入的.css的文件

用法：

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

3. less-loader

作用：less-loader会处理import / require（）/ @import / url 引入的.less的文件

用法：

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

4. file-loader

作用：1,将要加载的文件复制到指定目录 2,生成请求文件资源URL

用法：

 { // 除了这几种格式都用file-loader
                exclude: /\.(html|css|js|less|jpg|png|gif)$/,
                loader: 'file-loader'
            }

5. url-loader

作用：url-loader封装了file-loader,1.文件大小小于limit参数，url-loader将会把文件转为DataURL；2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。

用法：

 {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options:{
                    limit: 8 * 1024,
                    name: '[hash:10].[ext]'
                }
            },

5. html-loader

作用：处理html中的img

用法：

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

6. postcss-loader postcss-preset-env

作用：处理css3的兼容性代码 例如 flex 还有动画属性

注意： 1， npm install --D postcss-loader@2.1.1 可能要装这个版本 2， 注意不同环境的代码验证 需要靠这个变量来控制NODE_ENV=development， 设置mode是没用的， 在lessloader 的上面

用法：分为 1、2、

1. 在module中使用

 {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options:{
                            ident:'postcss',
                            plugins:()=>[require('postcss-preset-env')()]
                        }
                    }
                ]
            },

2. 在package.json中写以下配置

  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

7. 下载 eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import

注意此插件 可能需要cnpm下载 在rules里 加入enforce: ‘pre’,必须保证eslint的优先执行

作用：代码规范 使用airbnb的规范

用法：1、2、3、

1. module.rules

 {
                test: /\.js$/,
                loader:'eslint-loader',
                enforce: 'pre',
                exclude:'/node_modules/',
                options:{
                    fix: true
                }
            }

2. package.json集成airbnb-base

 "eslintConfig": {
    "extends": "airbnb-base"
  }

3. 在.eslintrc.json中进行兼容配置

{
  "env": {
    "browser": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module"
  }
}

8. babel-loader @babel/preset-env @babel/core @babel/polyfill core-js

注意此插件 可能需要cnpm下载, 注意presets不要写成了preset

把es6的语法编译成es5的语法 ，兼容浏览器 ，用法1只能兼容到 2才能兼容到全部

用法：

1. 基本用法

  {
                test: /\.js$/,
                loader:'babel-loader',
                exclude:'/node_modules/',
                options:{
                    presets: ['@babel/preset-env']
                }
            },

2. 使用@babel/polyfill 兼容全部情况

  // 在代码中 先引入即可 
  import '@babel/polyfill';

3. 使用core-js 按需加载 注意注释@babel/polyfill

     {
                test: /\.js$/,
                loader:'babel-loader',
                exclude:'/node_modules/',
                options:{
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                useBuiltIns: 'usage',
                                corejs: {
                                    version: 3
                                },
                                targets: {
                                    chrome: '60',
                                    firefox: '60',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            },

9. thread-loader

作用：使用多个进程来打包，增加打包速度，但是利用不好也会减速， 一般用于babel打包比较大的js的场景

用法：

  {
                test: /\.js$/,
                exclude: '/node_modules/',
                use: [
                    {
                      loader: 'thread-loader',
                      options:{
                          workers: 2 // 2个进程
                      }
                    },
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env',
                            ],
                            cacheDirectory: true
                        },
                    }
                ]