webpack
mkdir webpack-test
cd webpack-test
npm init -y
ls(package.json)
npm install webpack -g
npm install webpack –save-dev
ls(node_modules)
webpack hello.js hello.boundle.js
|
|
webpack天生不支持.css类型,直接webpack hello.js hello.boundle.js编译报错
|
|
为解决以上的错误,需要安装loader
|
|
安装完后还是报这样的错误,其实是因为只是引用了style.css,并没有给指定相应的loader
|
|
接下来运行,发现已经不报错了webpack hello.js hello.boundle.js,而且hellow.boundle.js多了一些代码,说明css文件已经打包进来了
|
|
新建一个html文件,引入hellow.bundle.js文件,在浏览器中打开,发现js文件可以弹出222
为了更方便的看效果,我们在css文件中添加一下代码
|
|
重新执行webpack hellow.js hellow.bundle.js,发现css效果并没有生效
这是为什么呢?其实我们要是想让css生效还要借助一个loader
|
|
重新执行webpack hellow.js hellow.bundle.js,发现css效果生效了
|
|
css-loader是使得webpack可以处理.css文件,style-loader是通过css-loader处理完的文件,把处理完的文件新建一个style标签插入到html文件里面,当html文件引入了打包后的文件后,页面就可以执行了,css也就直接插入到head标签了
简化代码
|
|
整合代码
|
|
总结
webpack
1.打包工具
- 可以把很多模块打包成很小的静态文件
2.代码分割
- 使得项目中加载时只加载项目需要的文件
3.loader
- 处理各种各样的文件,如果是js,无论是commonJS(require)、AMD、es6模块化写的,都可以通过loader处理,还可以处理css、image、json、coffeeScript、less以及自定义的(如:vue写的.vue结尾的文件,react写的.jsx结尾的文件)
webpack诞生
1.在处理大型项目时没有找到一种合理的解决方式
2.他想要的需求在现有的打包工具中达不到(比如:代码分割)
webpack目标
1.切分他的依赖树(把他的依赖树切分到不同代码块里,还需加载这些依赖)和懒加载类似
2.初始化的加载时间更少
3.任何静态资源都可以视为模块在项目中被引用,开发过程中起到便利作用
4.整合第三方类库,并把第三方类库作为模块在项目中引用
5.在整个打包过程中自定义(几乎是每一个部分都可以自定义去做一些自己想做的事情)
6.适合大型项目
为什么webpack和其他的打包工具不一样
1.代码分割 2.loaders 3.插件系统
webpack官网
|
|