1.代码分割,是页面加载当时需要加载的文件
2.loader机制处理,ES6,CSS,JS,图片,JSON
3.模块打包器,模块热更新
4.非常适合大型项目
一、安装
cd webpack
mkdir webpack-test
npm init 初始化目录
npm install webpack --save-dev (安装node_modules依赖和webpack)
随便搞一个js文件,wyq.js
wepack wyq.js wyq.bundle.js 简单搞定
wyq.bundle.js里面多了很多webpack内置的函数 并多模块进行标名
在创建一个hello.js
在创建一个style.css
以require('./hello.js/style.css')的形式进行注入
同时运行上一条终端命令
js可以成功插入,css提示报错
You may need an appropriate loader to handle this file type.
需要一个正确的加载方式加载这个文件类型
(在终端输入 npm install css-loader style-loader --save-dev);
(style-loader与css-loader不同之后进行讲解)
发现还是不行
这么解决就OK了
require('style-loader!css-loader!./style.css');
解释一下,css-loader是为了能读取.css文件,
style-loader是为了能把css文件中的代码插入到style标签里面,
每次写css都要写前缀嘛?
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'
1,在后面加入 --watch 就是自动监听打包
2,--progress 就是终端提示打包过程(百分比读条)
3,--display-modules 列出所有注入的文件和webpack使用什么loader方式读取
4,--display-reasons 为什么打包文件的原因
里面webpack终端命令写好的直接解决就好了
