webpackd的 loader 加载器的配置汇总

下面汇总了一些日常开发会使用到的加载器的配置放下，请继续往下看

打包处理css文件

1.在终端中运行如下命令，安装处理 css 文件的加载器

npm install style-loader css-loader -D

2.打开 webpack.config.js，新建一个 module 节点并配置，配置内容如下：

// 所有第三方文件模块的匹配规则
module: {
    rules: [
        { test: /\.css$/ ,use:['style-loader','css-loader']}
    ]
}
//其中 test 表示 匹配文件类型，use 表示对应要调用的 loader
// 其中需要注意：
// use 数组中指定的 loader 顺序是固定的
// 多个 loader 的调用顺序是 从后往前调用的

打包处理less文件

1.在终端中运行如下命令，安装处理 less 文件的加载器

npm install less-loader less -D

2.打开 webpack.config.js ，修改 module -> rules 数组(原数组内容不动)，新增规则如下：

// 所有第三方文件模块的匹配规则
module: {
    rules: [
        { test: /\.less$/ ,use:['style-loader','css-loader','less-loader']}
    ]
}
//其中 test 表示 匹配文件类型，use 表示对应要调用的 loader
// 其中需要注意：
// use 数组中指定的 loader 顺序是固定的
// 多个 loader 的调用顺序是 从后往前调用的

配置 postCSS 自动添加 css 的兼容前缀

1.在终端中运行如下命令，安装包

npm install postcss-loader autoprefixer -D

2.在根目录创建 postcss 的配置文件，命名为 postcss.config.js ，配置内容如下：

const  autoprefixer = require('autoprefixer')//导入自动添加前缀的插件
module.exports = {
    plugin: [ autoprefixer ] //挂载插件
}

3.打开 webpack.config.js 文件，找到 module -> rules 数组，修改 css 的 loader 规则，修改内容如下：

// 所有第三方文件模块的匹配规则
module: {
    rules: [
        { test: /\.css$/ ,use:['style-loader','css-loader','postcss-loader']}
    ]
}
//其中 test 表示 匹配文件类型，use 表示对应要调用的 loader

打包处理scss文件

1.在终端中运行如下命令，安装处理 scss 文件的加载器

npm install sass-loader node-sass -D

2.打开 webpack.config.js ，修改 module -> rules 数组(原数组内容不动)，新增规则如下：

// 所有第三方文件模块的匹配规则
module: {
 rules: [
{ test: /\.scss$/ ,use:['style-loader','css-loader','sass-loader']}
]
}
//其中 test 表示 匹配文件类型，use 表示对应要调用的 loader
// 其中需要注意：
// use 数组中指定的 loader 顺序是固定的
// 多个 loader 的调用顺序是 从后往前调用的

打包处理样式表中的图片和字体文件

1.在终端中运行如下命令，安装相关的加载器

npm install url-loader file-loader -D

2.打开 webpack.config.js ，修改 module -> rules 数组(原数组内容不动)，新增规则如下：

// 所有第三方文件模块的匹配规则
module: {
    rules: [
        { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/ ,use:'url-loader?limit=16940'
    ]
}
//其中 ？之后是 loader 的参数项，limit用来指定图片的大小，只有小于这个值才会被转换成 base64 图片

处理 JS 高级语法

假如你在项目的 JS 文件中输入如下代码，然后运行项目，

class Person {
    static info = 'aaa'
}
console.log(Person.info)

此时你会发现浏览器报错，错误提示 webapack 默认打包处理不了这种高级的 JS 语法 ，那要如何解决呢？
我们需要配置 babel 相关的 loader ，来解析并转换这些高级的 JS 语法，具体操作如下：
1.在终端中依次运行如下命令，安装 babel 转换器和 babel 语法插件相应的包

npm install babel-loader @babel/core @babel/runtime -D
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

2.在根目录创建 babel 的配置文件，命名为 babel.config.js ，配置内容如下：

module.exports = {
    presets: [ '@babel/preset-env' ] ,
    plugin: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties' ]
}

3.打开 webpack.config.js 文件，找到 module -> rules 数组，修改 css 的 loader 规则，修改内容如下：

// exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件
module: {
    rules: [
        { test: /\.js$/ ,use:'babel',exclude: /node_modules/
    ]
}