一、webpack的安装和命令行 --xyp_hf

http://webpack.github.io/docs/what-is-webpack.html

一、初始化

npm init

二、输入

npm install -g webpack
npm install webpack -D

三、新建一个文件hello.js,并一段代码
利用webpack打包这个hello.js这个文件,输入

webpack hello.js hello.bundle.js

webpack打包

webpack打包

文件结构图

webpack打包

四、我们再写一个world.js文件,然后让hello.js这个文件去引用这个文件,通过这个方式,我们来了解一下webpack的工作原理

五、接下来我们在hello.js文件里对函数进行引用

输入

webpack hello.js hello.bundle.js

六、下面我们来介绍一下webpack是如何处理css文件的
首先,建立一个style.css文件

同样,我们在hello.js里面引入这个style.css文件

【重点,这个千万不可省略】同时我们需要安装loader文件,输入

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

webpack hello.js hello.bundle.js

打包以后生成的代码

建立一个index.html文件

执行hello函数

输入

webpack hello.js hello.bundle.js

我们在浏览器打开这个文件,发现代码已经可以执行了

我们在给背景颜色加一个红色

输入

webpack hello.js hello.bundle.js

我们刷新index.html发现样式并没有生效,其实,我们还需要加一个style-loader,如图

输入

webpack hello.js hello.bundle.js

这时候发现背景变为红色,样式生效了,所以require(‘style-loader!css-loader!./style.css’)里面的style-loader!css-loader!千万不能省略或漏写。
如果不写,就要在命令行写很长一串

webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader"

【注意】”css=style-loader!css-loader”外面是双引号,单引号可能会报错

每一改变都输入一边这么长的命令实在有点麻烦,那有如何使它自动改变呢?有的,输入

webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --watch

输入打包进度过程

webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --progress

我们可以看到一个百分百读条

我们还可以看打包的模块

我们还可以查看到为什么打包这个模块的原因一并告诉你

webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --progress --display-reasons

所以通过这个命令行工具,我们可以很清晰的知道我们想要知道的信息
[注意]前面都是两个横杠,写一个会报错的

webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --progress --display-modules --display-reasons --watch

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值