一、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']
}
}
]
}