Webpack学习笔记四---loader

一、loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。
loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

• 使用 loader 告诉 webpack 加载 CSS 文件。为此，首先安装相对应的 loader

npm install css-loader --save-dev

• 然后指示 webpack 对每个 .css 使用 css-loader

module.exports = {
  module: {
    rules: [
      { 
      		test: /\.css$/,
      		use: 'css-loader'
      }
    ]
  }
};

• 在应用程序中，有三种使用 loader 的方式：

1.配置（推荐）：在 webpack.config.js 文件中指定 loader。
module.rules 允许你在 webpack 配置中指定多个 loader。 这是展示 loader 的一种简明方式，并且有助于使代码变得简洁

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: {
            modules: true
          }
        }
      ]
    }
  ]
}

2.内联：在每个 import 语句中显式指定 loader。
可以在 import 语句或任何等效于 “import” 的方式中指定 loader。使用 " ! " 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。

import Styles from 'style-loader!css-loader?modules!./styles.css';

3.CLI：在 shell 命令中指定它们。

//.jade 文件使用 jade-loader，对 .css 文件使用 style-loader 和 css-loader。
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

二、bable

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中 （地址）

• 命令行安装

npm install --save-dev babel-loader @babel/core

• 在webpack配置文件中进行配置

//例子
module: {
  rules: [
    {
     	test: /\.js$/,
     	exclude: /node_modules/,
     	loader: "babel-loader" ,
     	query:{
			presets:['latest']
		}
    }
  ]
}