webpack4中引入bootstrap 样式

有时候我们要引入bootstrap ui样式 并不引入 bootstrap.js文件 很多时候只是引入css文件
这个时候 就来简单说一下
1.在入口的文件引入bootstrap

import "bootstrap"  

如果上面这种方式引入的话 是会报错的错 它会显示找不到路径
页面上的样式并没有显示 他找到是 文件下的js文件
正确引入方式是

import "bootstrap/dist/css/bootstrap.css"

当然当我们引入css文件的时候 别忘了配置 css-laoder
首先是安装 cnpm i css-loader style-loader -D

{
	test:/\.css$/i,
	use:['style-loader','css-loader'] // 注意俩者先后顺序 别写错了
}

在页面上引入样式

div class="container">
		<div class="alert alert-primary">Hello World</div>
		<button class="btn btn-primary">确认</button>
</div>

启动webpack 打包就能看到显示效果了
当然 每次书写那么长的引入路径是不是 不方便 这个时候 我们可以采用用起别名的方式
在webpack.config.js 配置文件中 添加配置

resolve：{
	alias:{   // 起别名 
		bootstrap:'bootstrap/dist/css/bootstrap.css'
	}
}

这个时候我们再在 文件中引入 就可以直接
import “bootstrap” 就可以上面的那一大串了
既然说到resolve 配置好 那我就再提一下它的其他功能

resolve:{  // 解析第三方插件包
		modules:[path.resolve('node_modules')],  //限制模块查找范围
		mainFields:['style','main'],// 主文件查找区域 先 style 后main 
		mainFiles:[]  // 主入口文件名字
		extensions:['.js','.css','.scss','.vue'] // 自动添加文件后缀名  依次寻找文件
}