一、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

四、我们再写一个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