前端工程化之webpack中的加载器

2.3 webpack 中的加载器

1 通过 loader 打包非 js模块

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块，其他非.js 后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错！
loader加载器可以协助webpack 打包处理特定的文件模块，比如：
●
less-loader可以打包处理.less相关的文件
●
sass-loader可以打包处理.scss相关的文件
●
url-loader可以打包处理 css中与url路径相关的文件

2 loader的调用过程

2.4 webpack 中 加载器的基本使用

图中右边的是常见的文件的类型

1 打包处理css文件

出错

在没有配置webpack的加载器就想打包除js文件之外的其他的文件，这时，控制台就会报错

第一步： 1 cnpm i style-loader css-loader -D

// 其中 test 表示匹配的文件的类型， use 表示对应要调用的 loader

脚下留心：

●use数组中指定的loader 顺序是固定的

●多个 loader的调用顺序是：从后往前调用

解决报错

2 打包处理less文件

cnpm i less-loader less -D

3 打包处理scss文件

cnpm i sass-loader node-sass -D

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

cnpm i postcss-loader autoprefixer -D

报错信息：

PostCSS plugin autoprefixer requires PostCSS 8.

兼容性问题并没有得到解决：

我还是没有解决兼容性的问题！

【解决了版本控制之后， 新的问题出现了，就是我把打包的东西放在ie上面还是不生效！

【这儿出现了一个问题，就是postcss-loader 的版本 必须要做版本控制，否则会报错的！】

postcss做版本控制的命令

cnpm i postcss-loader autop[email protected] -D

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

base64的图片加载速度更加快一些！ 如何看到base64的图片格式，你把上面的limit后面的值加 1 就可以了！在浏览器里就可以看到了！【只有图片小于limit的时候才会发生转换！】

cnpm i url-loader file-loader -D

6 打包处理 js 文件中的高级语法

cnpm i babel-loader @babel/core @babel/runtime -D

2 cnpm i

@babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

最初的

npm uninstall babel-loader

npm install [email protected]

首先，，谈一谈我对webpack的打包js高级语法的报错近两天的问题：

原先就一直报的上面的错误，今天我又尝试了一下，居然就可以了，让我不明所以，没报错了！好奇怪！下面附上截图：

好就是关于webpack打包高级js语法的问题已经找到根本的问题了就是我 在Babel.config.js中导出的插件数组里面右边的这句是不能加进去的否则就会报错// '@babel/plugin-transform-runtime',// 不对，保持原来这个plugins的语句不变，是不行的，还是会报错的，只有把这句代码注释掉才可以，但是我自己不知道是为什么！

真正的错误在babel.config.js中【得把其中的一句注释掉才行】：

module.exports = {

​    presets: ['@babel/preset-env'],

​    plugins: [

​        // '@babel/plugin-transform-runtime',   // 不对，保持原来这个plugins的语句不变，是不行的，还是会报错的，只有把这句代码注释掉才可以，但是我自己不知道是为什么！

​        '@babel/plugin-proposal-class-properties'

​    ]

}