webpack--中级提升
前言
在webpack–快速入门(https://blog.csdn.net/wangbiao9292/article/details/92622914)那篇文章里,咱们已经算是对webpack有了基本的了解,如今咱们继续研究webpack,提升认知.css
须要解决的问题
1.手动进行css打包
2.对一些概念进行理解
https://www.webpackjs.com/concepts/webpack
css手动打包压缩
步骤:
1.打包css须要引入css-loader和style-loaderweb
npm install css-loader style-loader --save-devnpm
2.新建.css文件,作测试用
3.运行webpack,压缩测试gulp
4.测试完毕,运行,基本没碰到什么问题api
概念理解
基本学到这里,算是对webpack有了基本的认识,但webpack仅仅做为打包压缩工具来使用确定是比较Low的,不如用gulp.那么,咱们看下其文档说明,看看其独特之处.本人建议能看其api,官网的就看这些,看别人的,所谓技术参差不齐,颇有可能被别人耽误时间.
官网看不了,全是英文,主要是加载速度缓慢,这里选择https://www.webpackjs.com/concepts/中文文档,这里的文档说实话,翻译的不怎么样,并且不连贯.不够相比其余的,算是全的.svg
概念理解
webpack是静态模块打包器,只能处理js,但因为loader,其也能够处理其余文件.而且是可配置的工具
| 名称 | 常见配置 | 做用 |
|---|---|---|
| 入口(entry) | module.exports={entry:“main.js”} | webpack从main.js进入,进行解析 |
| 出口(output) | module.exports={output:{path:输出路径,filename:“文件名”} | 压缩后输出的文件名和地址 |
| loader | rules:[{test:/.css$/,use:[‘css-loader’,‘style-loader’]}] | 这里的是处理css的loader |
| 插件(plugins) | 经过require引用 | 通常处理其余业务,更增强大和牛逼 |
剩下的就基本没什么可看的呢.都是一些概念性问题,没什么卵用,看了也是浪费时间;过一段时间用webpack跟一个项目,这样会学习的比较快.学习