内容简介:终于忙完了论文,可以愉快的开始学习了,重拾起重学前端、webpack以及Vue的源码解读作为入职前的复习吧。整个webpack系列将分成五个大的部分进行,以webpack4.0为文档进行解读,从简单的概念解读到最后的实现。 整个知识点涉及范围:使用loader来预处理文件,把不同的静态资源(模块的结尾不是js的模块)打包成js文件url-loader基本能实现file-loader的打包功能,适用于小图片的打包
终于忙完了论文,可以愉快的开始学习了,重拾起重学前端、webpack以及Vue的源码解读作为入职前的复习吧。整个webpack系列将分成五个大的部分进行,以webpack4.0为文档进行解读,从简单的概念解读到最后的实现。 整个知识点涉及范围:
loader
使用loader来预处理文件,把不同的静态资源(模块的结尾不是js的模块)打包成js文件
loader打包静态资源
打包图片
npm install file-loader -D
module.exports = { //打包项目的入口文件 entry: './src/index.js', module:{ rules:[{ test:/\.(jpg|png|gif)$/,//打包以jpg、png、gif结尾的所有图片文件 use:{ loader:'file-loader', options:{//placeholder 占位符 name:'[name]_[hash].[ext]',//保持原图片的名字+hash值和后缀,主要单引号 outputPath:'image/'//打包图片的位置 } } }] } } 复制代码
- 更多的有关于 file-loader的配置见文档
打包图片成base64格式
url-loader基本能实现file-loader的打包功能,适用于小图片的打包
- 好处:图片打包成js文件,不用加载图片的地址,页面快速显示
- 坏处:图片过大导致js文件过大
所以,当图片的大小小于limit值时会把图片打包成base64格式,大于limit值则按照file-loader打包成图片文件
npm install url-loader -D
module.exports = { module:{ rules:[{//打包以jpg、png、gif结尾的所有图片文件 test:/\.(jpg|png|gif)$/, use:{ loader:'url-loader', options:{//placeholder 占位符 name:'[name]_[hash].[ext]',//保持原图片的名字+hash值和后缀,主要单引号 outputPath:'image/',//打包图片的位置 limit:2048 } }] } } 复制代码
- 更多的有关于 url-loader的配置见文档
打包样式css文件
需要使用css-loader、style-loader
- css-loader:分析几个css文件的关系,合并css文件
- style-loader:将css-loader合并的css内容挂载在页面的head部分
实现方式:
npm install css-loader style-loader -D
module.exports = { module: { rules: [{//打包css文件 test:/\.css$/, use:['style-loader','css-loader'] }] } } 复制代码
- 更多的有关于 css-loader的配置见文档
打包样式scss文件
需要使用sass-loader、node-sass
npm install sass-loader node-sass -D
module.exports = { module: { rules: [{ test: /\.scss$/, use:['style-loader','css-loader','sass-loader'] }] } }; 复制代码
在配置中,有三个loader,执行顺序是从下到上,从右到左。在打包scss文件时,首先执行sass-loader:对sass翻译成css文件,在挂载到css-loader,最后style-loader.
- 更多的有关于 sass-loader的配置见文档
为样式添加不同浏览器的前缀
为了兼容不同的浏览器,在写样式的时候需要加上适用不同浏览器的前缀,如-o、-webkit、-moz等
-安装loader实现: npm install postcss-loader autoprefixer -D
-在根目录创建postcss.config.js
moudle.exports ={ plugins:[ require('autoprefixer') ] } 复制代码
- 在webpack.config.js中添加loader的配置
module.exports = { module: { rules: [{ test:/\.scss$/, use:[ 'style-loader', 'css-loader', 'sass-loader', 'postcss-loader'] }] } } 复制代码
- 更多的有关于 postcss-loader的配置见文档
css-loader添加不同的配置
css模块化打包
modules:true
scss文件的嵌套引用
-
场景:scss文件通过import引入其他scss文件,导致打包的时候引入的scss文件打包错误
-
实现:
importLoader:2
-
在webpack.config.js中添加loader的配置
module:{ rules:[{//打包scss文件 test:/\.scss$/, use:[ 'style-loader', { loader:'css-loader', options:{ importLoaders:2,//index.scss中通过import引入其他的scss文件,引入的scss文件在打包的时候也将依次经过所有的loader modules:true } }, 'sass-loader', 'postcss-loader'] }] } 复制代码
打包字体图标文件
在阿里巴巴矢量图标库中,把需要的字体图标下载到本地,解压。将iconfont.eot iconfont.svg iconfont.ttf iconfont.woff 四种图片文件放入到项目中,在src中新建一个放字体图标的文件夹font。将iconfont.css文件拷贝到项目中,修改对应字体的引用路径。
npm i file-loader -D
module.exports = { ... module: { rules: [{ test: /\.(eot|ttf|svg|woff)$/, use:{ loader:'file-loader' } }, ] }] } } 复制代码
- 更多的有关于加载字体的配置见文档
以上所述就是小编给大家介绍的《Webpack核心概念解析》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Kubernetes核心组件解析
- ibatis 核心原理解析!
- ReactiveCocoa 源码解析之核心流程
- Webpack 核心模块 tapable 解析
- Laravel 核心——IoC 服务容器源码解析(服务器解析)
- XGBoost过时了?LightGBM核心解析
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。