webpack--中级提高

前言

在webpack–快速入门(https://blog.csdn.net/wangbiao9292/article/details/92622914)那篇文章里,我们已经算是对webpack有了基本的了解,现在我们继续研究webpack,提高认知.

需要解决的问题

1.手动进行css打包
2.对一些概念进行理解
https://www.webpackjs.com/concepts/

css手动打包压缩

步骤:
1.打包css需要引入css-loader和style-loader

npm install css-loader style-loader --save-dev

2.新建.css文件,做测试用

3.运行webpack,压缩测试

4.测试完毕,运行,基本没碰到什么问题

概念理解

基本学到这里,算是对webpack有了基本的认识,但webpack仅仅作为打包压缩工具来使用肯定是比较Low的,不如用gulp.那么,我们看下其文档说明,看看其独特之处.本人建议能看其api,官网的就看这些,看别人的,所谓技术良莠不齐,很有可能被别人耽误时间.
官网看不了,全是英文,主要是加载速度缓慢,这里选择https://www.webpackjs.com/concepts/中文文档,这里的文档说实话,翻译的不怎么样,而且不连贯.不够相比其他的,算是全的.

概念理解

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跟一个项目,这样会学习的比较快.