初学wbepack(2) Loader

Loader

因为webpack其实只能处理JS文件，但在开发中我们通常还要打包其他的配套文件，如css、less、图片，以及为了兼顾兼容性，需要将es6的语法转化为es5。这时就需要loader来协助转化。

处理CSS文件

文件结构：

1、main.js文件添加css文件的依赖

​ require('./css/index.css')

2、安装css-loader和style-loader

​ npm install --save-dev style-loader

​ npm install --save-dev css-loader

3、在webpack.config.js文件中添加配置

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

处理less文件

1、main.js文件添加less文件的依赖

​ require('./css/normal.less')

2、安装less和less-loader

​ npm install less less-loader --save-dev

3、在webpack.config.js文件中添加配置

• 官网为添加rules

  {
          test: /\.less$/i,
          loader: [
            // compiles Less to CSS
            'style-loader',
            'css-loader',
            'less-loader',
          ],
  },
  

• 发生报错

• 应该把 loader改为 use

处理图片

• webpack5内置了处理图片、字体文件，不需要额外的loader来处理 。(8条消息) webpack5不要再用url-loader了_前端精髓-CSDN博客

• 旧的用法url-loader | webpack 中文网 (webpackjs.com)

ES6转ES5语法

安裝babel

npm install babel-loader@7 babel-core babel-preset-es2015 --save-dev

安装7.0版本，官网显示的为8.0版本，兼容性未知，可自己尝试
webpack-babel-loader指引

webpack.config.js文件中添加配置

添加rules

 {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }

打包后的bundle.js文件内容會被轉化成es5語法

官网上会显示presets: [’@babel/preset-env’]
需要自己配置环境太麻烦，直接改为es2015即可