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列出每一条的打包原因