webpack安装和命令行

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

执行上面命令，我们发现终端进入『等待』状态，以后我们在修改文件，就不必再次打包了。

这就是实现了自动打包，