4 webpack loader

处理css

1. 安装npm i css-loader style-loader -D
2. 配置webpack.config.js

  module: {
    rules: [
      // 配置的是用来解析.css文件的loader(style-loader和css-loader)
      {
        // 用正则匹配当前访问的文件的后缀名是 .css
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // webpack底层调用这些包的顺序是从右到左
      }
    ]
  }

loader的释义:

1. css-loader: 解析css文件
2. style-loader: 将解析出来的结果 放到html中, 使其生效
3. 注意执行顺序，从右往左

处理less 和 sass

1. 安装npm i less less-loader sass-loader node-sass -D
2. 配置webpack.config.js

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

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

处理图片和字体

1. 安装 npm i file-loader url-loader -D

url-loader封装了file-loader, 所以使用url-loader时需要安装file-loader

2. 配置webpack.config.js

{
    test: /\.(png|jpg|gif)/,
    use: [{
        loader: 'url-loader',
        options: {
            // limit表示如果图片大于5KB，就以路径形式展示，小于的话就用base64格式展示
            limit: 5 * 1024,
            // 打包输出目录
            outputPath: 'images',
            // 打包输出图片名称
            name: '[name]-[hash:4].[ext]'
        }
    }]
}

babel-loader

1. 安装npm i babel-loader @babel/core @babel/preset-env webpack -D

2. 如果需要支持更高级的ES6语法, 可以继续安装插件:

   npm i @babel/plugin-proposal-class-properties -D

   也可以根据需要在babel官网找插件进行安装

{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/env'],
      plugins: ['@babel/plugin-proposal-class-properties']
    }
  },
  exclude: /node_modules/
}

官方更建议的做法是在项目根目录下新建一个.babelrc的babel配置文件

{
  "presets": ["@babel/env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

如果需要使用generator，无法直接使用babel进行转换，因为会将generator转换为一个regeneratorRuntime，然后使用mark和wrap来实现generator

但由于babel并没有内置regeneratorRuntime，所以无法直接使用

需要安装插件:

​ npm i @babel/plugin-transform-runtime -D

同时还需安装运行时依赖:

​ npm i @babel/runtime -D

在.babelrc中添加插件:

{
  "presets": [
    "@babel/env"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}

如果需要使用ES6/7中对象原型提供的新方法，babel默认情况无法转换，即使用了transform-runtime的插件也不支持转换原型上的方法

需要使用另一个模块:

​ npm i @babel/polyfill -S

该模块需要在使用新方法的地方直接引入:

​ import '@babel/polyfill'