前端项目-webpack-加载器loader配置-打包非.js文件

前端项目-webpack-加载器loader配置

---

目录

---

---

内容

---

1、简介

在实际开发过程中，webpack默认只能打包处理以.js结尾的模块，其他非.js后缀结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则报错

loader 加载器可以协助webpack打包处理特定的文件模块，比如：

• less-loader：打包出来.less相关的文件
• sass-loader：打包出来.scss相关的文件
• url-loader：打包处理css中与url相关的文件

2、loader的调用过程

3、加载器的使用

加载器处理的类型：

• css
• less
• scss
• postcss
• javascript高级语法
• image/font
• vue

3.1、打包处理css文件

1. 新增src/assets/css/index.css文件：

    li {
    	list-style: none;
    }
   

2. index.js 中导入index.css

    import './assets/css/index.css
   

3. 终端报错图示3.1-1:：

解决方案：

1. 下载安装处理css依赖

    npm install -D style-loader css-loader 
   

2. 在webpack.config.js的module->rules数组中，添加loader规则如下：

    module: { // 所有第三方模块的匹配规则
    	rules: [
    		{test: /\.css$/, use: ['style-loader', 'css-loader']}, // 处理css加载器
    	]
    }
   

   • 解析：
     • test: 要匹配的文件类型，正则匹配
     • use：指定的loader顺序是固定的，从后往前调用

3. 重新运行npm run dev ,查看结果，正常显示

3.2、打包处理less文件

1. 新增src/assets/css/index.less文件：

    body {
    	margin: 0;
    	padding: 0;
    }
   

2. index.js 中导入index.less

    import './assets/css/index.less
   

3. 终端报错

解决方案：

1. 下载安装处理less依赖

    npm install -D less-loader less
   

2. 在webpack.config.js的module->rules数组中，添加loader规则如下：

    module: { // 所有第三方模块的匹配规则
    	rules: [
    		{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']} // 处理less加载器载器
    	]
    }
   

3. 重新运行npm run dev ,查看结果，正常显示

3.3、打包出来scss文件

1. 新增src/assets/css/index.scss文件：

    ul {
    	font-size: 12px;
    	li {
    		line-height: 50px;
    	}
    }
   

2. index.js 中导入index.less

    import './assets/css/index.scss
   

3. 终端报错

4. 下载安装处理scss依赖

    npm install -D sass-loader node-sass 
   

5. 在webpack.config.js的module->rules数组中，添加loader规则如下：

    module: { // 所有第三方模块的匹配规则
    	rules: [
    		{test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']} // 处理scss加载器载器
    	]
    }
   

6. 重新运行npm run dev ,查看结果，正常显示

3.4、配置postCss自动添加css的兼容前缀

1. index.html添加个如下元素：

    <input type="text" placeholder="请输入姓名">
    	<ul>
    	...
   

2. index.css中添加样式

    ::placeholder {
    	color: pink;
    }
   

3. 不同浏览器效果图

   • 谷歌浏览器：

   • IE浏览器：

解决方案：

1. 下载安装添加css兼容前缀的相关依赖

    npm install -D postcss-loader autoprefixer
   

2. 项目根目录创建postcss配置文件postcss.config.js文件，并初始化配置如下：

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

3. 在webpack.config.js的module->rules数组中，修改css loader规则如下：

    module: { // 所有第三方模块的匹配规则
    	rules: [
    		{test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader']} // 自动添加前缀
    	]
    }
   

4. 重新运行npm run dev ,查看结果，正常显示

• IE浏览器：

3.5、打包样式表中的图片或字体文字

1. index.html添加个如下元素：

    ...
    </ul>
    <div class="box"></div>
    ...
   

2. index.css添加样式

    .box {
    	width: 585px;
    	height: 340px;
    	background-color: pink;
    	background: url('../images/1.jpg') no-repeat;
    }
   

3. 添加图片assets/images/1.jpg:

4. 控制台报错

解决方案

1. 下载安装处理图片或字体文字依赖

    npm install -D url-loader file-loader 
   

2. 在webpack.config.js的module->rules数组中，添加loader规则如下：

    module: { // 所有第三方模块的匹配规则
    	rules: [
    		{
    			test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
    			use: 'url-loader?limit=16940'
    		} // ?之后为loader参数项，limit为限制文件大小
    	]
    }
   

   • 解析：？之后为url-loader参数项
     • limit 用来指定图片的大小，只有小于limit大小的图片，才会被转为base64图片
     • 如果大于等于limit大小，原格式

3. 重新运行npm run dev ,查看结果，正常显示

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

1. index.js添加如下代码：

    class Person {
    	static name = 'zhangsan'
    }
   
    console.log(Person.name);
   

2. 控制台报错

解决方案

1. 安装babel转换器相关的包：

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

2. 安装babel语法插件相关的包

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

3. 在项目根目录创建babel配置文件 babel.config.js,并初始化如下配置

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

4. 在webpack.config.js的module->rules数组中，添加loader规则如下：

    module: { // 所有第三方模块的匹配规则
    		rules: [
    			{test: /\.js/, use: 'babel-loader', exclude: /node_modules/} //处理js高级语法
    		]
    }	
   

5. 重新运行npm run dev ,查看结果，正常显示

后记 ：

vue官网地址：https://cn.vuejs.org/

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA