【Webpack】webpack配置文件（webpack.config.js）的使用2

这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战

html-webpack-plugins的配置

1.html-webpack-plugin插件的作用

将物理磁盘中的html放入到内存中

可以直接访问内存的html和js文件

html文件会自动引用内存中的js文件

对一个html文件和js文件单独修改完毕后，还要用webpack打包

2.安装

npm install html-webpack-plugin -D

3.导入插件

在webpack.config.js中

//引入插件类
const HtmlWebpackPlugin = require('html-webpack-plugin')
//新建插件对象
const htmlPlugin=new HtmlWebpackPlugin({
template:path.join(__dirname,'入口html文件路径'),
filename:'index.html'
})
plugins:[
//插入插件对象
htmlPlugin
]

4.运行

通过webpack-dev-server运行即可

webpack中url-loader的使用

使用url-loader的原因：webpack无法处理url地址

1.处理图片url

1. 安装第三方插件 安装命令

npm i url-loader file-loader -D

url-loader内部依赖file-loader

配置webpack.config.js

在module.exports中新增属性

 module:{
        rules:[
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader'}
		]
}

当要处理的文件中有一下.文件，就会找到url-loader进行处理

2. url-loader配置 图片格式 url-loader?limit=字节byte

当图片大小大于或等于该值时，不会转成base64格式的字符串

当图片大小小于该值时，就会转成base64格式的字符串

图片名称 url-loader?name=[name].[ext]

防止被覆盖 url-loader?name=[hash:8]-[name].[ext]

2.处理字体文件url

配置webpack.config.js

在module:rules:中增加一个对象

{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}

在加载bootstrap中的字体文件时，会无法识别这些后缀，所以要增加

webpack配置alias设置根目录

1.增加alias属性

在webpack.config.js文件中

const path=require('path')
module.exports={
	   resolve:{
	   //给src取别名
        alias:{
            '@':path.join(__dirname,'./src')
        }
    }
}

2.使用别名

在引用src目录下的文件时，可以直接使用@来代替../src

import a from '@/a.js'

使用别名的好处： 可以不用考虑路径问题，当使用别名时，使用的是绝对路径。而使用绝对路径则在文件移动时，需要重新修改路径