webpack安装和命令行
1.创建一个新的文件夹,cd到这个文件夹
2.打开命令行,进入这个文件夹,安装webpack
npm install webpack --save-dev
3.windows下需要全局安装npm install webpack-cli -g
不安装有可能会报错:
4.打开目录,并且创建hello.js脚本
5.对第一个脚本打包,报错了,百度查找答案,加上-o
6.分析一下里面的内容
哈希值
版本号
花费的时间
打包的文件
文件的大小
打包的分块
块名称
7.hello.bundle.js里面有什么?
7.1内置函数
7.2对模块进行编号
8.再写一个文件去引用hello.js这个文件
8.1写一个world文件
8.2在hello.js文件种去引用这个文件
8.2.1用require去引用world.js
8.2.2重新打包
8.2.3查看打包后的内容
require变成了webpack内置函数的require
9.引入CSS
我们先来写一个CSS文件
但是在打包的时候发生了错误
追其原因,是因为我们没有装CSS-loader和Style-loader,
执行npm install css-loader style-loader --save-dev
OK,到这里有一个很重要的环节不要遗漏:
这个css-loader!的意思为引用style.css之前,先用css-loader!做处理
这是打包以后生成的代码:
10.来测试一下打包的文件有没有效果,我们先创建一个index.html文件
接着修改一下hello.js文件,重新打包
11.给body添加背景颜色
11.1先修改style.css文件
11.2打包后发现,body的背景颜色并没有变成红色,原因是我们需要在hello.js中再添加一些东西,也就是刚才遗留的style.css,
这里讲一下css-loader!主要用来处理.css的文件,而style-loader!的作用是把我们处理完成的css文件,变成style标签,插入到header标签里
11.3我们有没有办法可以每次不写style-loader!cssloader呢?可以!
11.3.1先去掉 style-loader!cssloader
11.3.2打开命令行,输入webpack --help,这里有许多可以调用的东西
命令行:webpack hello.js -o hello.bundle.js --module-bind 'css=style-loader!css-loader',报错了,原因是需要把单引号变成双引号
结果:OK,并没有受到什么影响
我发现这样不能时时把css的效果展现出来,help中有一个--watch,
我们打开命令行输入:webpack hello.js -o hello.bundle.js --module-bind "css=style-loader!css-loader" --watch,
只要就能时时检测变化了。
其他的命令还有
--progress显示打包的进度
--display-modules会把所有打包的模块列出来
--display--resons列出每一条的打包原因