1、进入我们的项目目录webpack-test，初始化npm
首先：npminit
执行这个命令，会要求我们输入name、version、description等，也可以不填，一路回车。
最后会在目录下生成一个package.json文件（我们现在不介绍这个文件）。
2、安装webpack
然后：npminstallwebpack--save-dev
这命令执行完成之后，我们的webpack-test目录下，会多一个node_modules文件夹。
3、小试牛刀（看看webpack打包到底是个啥）
在根目录下新建一个hello.js文件，代码如下：
然后我们用webpack来打包这个hello.js文件，看看打包之后是个啥。
执行命令：
我们来解释一下什么意思：Asset指这次打包之后的文件名，Size这次打包之后文件的大小，Chunks这次打包的分块。
我们可以来看一看，打包生成的这个hello.bundle.js文件，我们发现看不懂，只看到最后有我们的hello.js的代码了：
4、提升
在根目录新建一个word.js，代码如下：
没有报错，竟然没有报错。我们竟然可以使用require了，要知道这在原生js里可不行的。
6、安装需要的loader
其实除了css-loader，我们还需要style-loader，它们是一起使用的。
OK，我们已经安装了这2个loader，但是还没有完，我们还需要指定这2个loader。
我们在引入css文件的时候，指定这2个loader。(注意语法)
好了，我们再次执行webpack打包命令，就不会报错了。
我们可以新建一个html模板文件，然后引入我们打包生成的hello.bundle.js，测试一把。
7、css-loader和style-loader
还记得我们前面是这样引入css文件的吧
这表示：先用css-loader来处理css文件，然后style-loader接着处理。
style-loader就是把css-loader处理完的内容，新建一个标签(style)，插入到我们的html模板里面。
比如，前面的例子，我们的html模板文件在引入hello.bundle.js之后，我们通过浏览器观察源码，我们会发现在html的head标签内，会多了如下代码：
8、每修改一下都要重新打包，这样是不是太麻烦了。
我们可以在打包的是，给加一个参数
webpack hello.jshello.bundle.js--watch
1
1
执行上面命令，我们发现终端进入『等待』状态，以后我们在修改文件，就不必再次打包了。
这就是实现了自动打包，
