webpack学习(三)使用第三方加载器去加载css less等&url-load的使用&babel配置

最新推荐文章于 2024-05-11 09:55:48 发布

李初新

最新推荐文章于 2024-05-11 09:55:48 发布

阅读量1.6k

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/leeue/article/details/93750055

版权

webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、加载CSS文件

加载css文件不能直接用link 所以我们肯定要用 import来导入这个css文件

这样直接导入是会报错的
在main.js直接导入会报错

// 使用import 导入样式表
import './css/index.css' //如何直接这样导入会报错

注意: 因为webpack默认的打包处理值是针对js文件，无法处理其他的非JS类型的文件
如果非要处理这些非JS文件需要借助第三方加载器 loader
当前我们要打包处理css文件所以需要安装两个插件:
npm i style-loader -D
npm i css-loader -D
连写: npm i style-loader css-loader -D

安装完成后需要在webpack.config.js中配置

webpack.config.js中新增一个配置节点叫做：module,它是一个对象，在module对象身上有一个rules属性，
是个数组，负责存放第三方文件和匹配和处理规则：

  module: { //这个节点用于配置所有的第三方模块加载器
        rules: [
            {test: /\.css$/,use:['style-loader','css-loader']} //配置处理.css文件第三方 loader规则
        ]
        
    }

在这里插入图片描述

调用方式: webpack首先是执行import ‘./css/index.css’ 发现是午无法处理的，就去webpack.config.js中
去找这个模块看有没有解析后缀名为.css模块的加载器，如果有事从右往左依次开始执行。如果没有则会报错。这个上面是先执行 css-loader加载器后执行 style-loader加载器。如果解析到最后了，发现已经没有加载器了。会将加载器的执行结果交给webpack打包输出到bundle.js中去。

以后遇到的这种第三方没法解析的都这样去做

二、处理css文件中路径地址
默认情况下，webpack无法处理css文件中的url 地址，不管是图片还是字体库，只要是url地址，都处理不了
在本地项目中安装地址加载器: url-loader

安装命令:  npm i url-loader file-loader -D

在webpack.config.js中使用
在这里插入图片描述

url-loader可以写的参数

    rules: [
            {test: /\.css$/,use:['style-loader','css-loader']},//配置处理.css文件第三方 loader规则
            
            // 这样是对所有的图片都进行base64处理，小图片不处理，大图片进行处理
            //  {test: /\.(jpg|png|gif|bmp|jpeg)$/,use: ['url-loader']},//处理图片路径的加载器
            // {test: /\.(jpg|png|gif|bmp|jpeg)$/,use: ['url-loader?limit=194470']},//处理图片路径的加载器
            // 这里的limit 给定的值 是图片的大小，单位是 byte ,如果当前给定的值大于或等于图片的大小，会转换成base64，如果当前给定的值小于图片的大小值，就不会转成base64

                     // 让文件保持原来的名称不变
            // {test: /\.(jpg|png|gif|bmp|jpeg)$/,use: ['url-loader?limit=194470&name=[name].[ext]']},
   
                     // 让文件保持原来的名称不变 但是前面加了8位的哈希值
            {test: /\.(jpg|png|gif|bmp|jpeg)$/,use: ['url-loader?limit=194470&name=[hash:8]-[name].[ext]']},
        ]

二、在webpack中使用bootstrap

第一步:安装 bootstrap

命令: npm -i bootstrap -S

第二步:

使用import导入 bootstrap
// 注意:如果要通过路径的形式去引入 node_modules 中相关的文件，可以直接省略路径前面的
// node_modeles 这一层目录 直接写包的名字然后后面跟上具体的文件路径 
//不写这个目录默认去node_modeles这个目录下找
import 'bootstrap/dist/css/bootstrap.css'

第三步:
当前bootstrap版本是4.X以上版本，所以如果要使用图标就必须安装图标的css,4以上的图标样式分离
了。

命令: npm i https://github.com/iconic/open-iconic.git -S

第四步:导入图标：

import 'open-iconic/font/css/open-iconic-bootstrap.css'

再在webpack.config.js中去配置加载器

// 处理字体图标加载器

    {test: /\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader'},//处理字体文件的loader

三、解析高级的ES6语法配置 Babel

在webpack中默认只能处理一部分 ES6的新语法，一些更高级的ES6语法或者ES7的语法，
webpack是处理不了的这个时候就需要借助第三方的loader 来帮助webpack 处理这些高级的
语法。当第三方loader 把高级语法转为低级语法之后会把结果交给 webpack去打包到 bundle.js

通过: Balel 可以帮我我们将高级的语法转为低级的语法
在 webpack 中运行如下两套命令，安装两套包，去安装 Babel 相关的loader 功能

第一套包: npm i babel-core babel-loader babel-plugin-transform-runtime -D
第二套包: npm i babel-preset-env babel-preset-stage-0 -D

然后再 webpack的配置文件中 webpack.config.js中在module 节点下的 rules 数组中
添加一个新的匹配规则

{test:'/\.js$/',use:'babel-loader',exclude:/node_modules}

注意: 在配置 babel 的loader 规则的时候必须把 node_modules 目录通过 exclude选项进行排除掉.

原因: 1.如果不排除 node_modules 则 Balel 会把 node_modules 中所有第三方js文件
都打包编译，这样会非常消耗CPU，同时打包速度非常慢
2. 哪怕最终Babel 把所有的node_modules中的js 都转换完毕，但是项目也无法正常的运行

在项目根目录中，新建一个叫做 .babelrc 的Babel 配置文件,这个配置文件属于JSON格式，所以在写 .babelrc 写如下的配置

{
"presets": ["env","stage-0"],  //预设 可以翻译成Babel语法  env
"plugins":["transform-runtime"]  //上面安装了有个插件叫 babel-plugin-transform-runtime
}

注意：因为我当前的版本已经是webpack4以上版本了，在安装babel时候运行上面第一套命令的时候出现了警告。

npm WARN babel-loader@8.0.6 requires a peer of @babel/core@^7.0.0 but none is installed.
 You must install peer dependencies yourself.

在这里插入图片描述
找到解决方案的博客:https://www.cnblogs.com/codebook/p/10285475.html
2.1 babel-loader@8.x是webpack用于Babel 7.x的一个整合loader模块，Babel 7.x已经把所有的相关的包从babel-迁移到了@babel的npm环境仓库。

所以上述警告是合适的，你可以通过使用@babel/core代替babel-core来安装：

所以第一套命令是：

npm i @babel/core  babel-loader babel-plugin-transform-runtime -D

警告上面那一套，如果你的babel是七以下的可能会适用。但是你要是按照 npm i babel-core -S这种命令来，是会报错的

报错：

ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/mac/Documents/04前端学习/04code/01Vue/webpack-study/src/main.js:
As of v7.0.0-beta.55, we’ve removed Babel’s Stage presets.
Please consider reading our blog post on this decision at
https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
for more details. TL;DR is that it’s more beneficial in the
long run to explicitly add which proposals to use.
在这里插入图片描述
这种错就是最新的babel已经不是这样配置的了。