Webpack打包工具的使用---打包引用JS和CSS文件

1、webpack概述：

webpack是一款加载兼打包工具，它能把各种资源，例如J(含JX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。

2、全局安装：

在安装Webpack之前，我们的本地环境需要支持node.js。安装node.js可以参考node官方文档。

使用如下命令在全局安装webpack

npm install webpack -g

3、webpack的使用步骤

A:JS文件的引用

（1）创建一个名为webpack的文件夹，里面创建两个文件夹，一个是app，一个是build；创建一个名为”webpack.config.js“的配置文件。

（2）在webpack文件夹下执行以下命令，生成package.js文件：

npm init

文件内容如下：此文件用来告知一些基本信息

（3）在webpack文件夹下执行以下命令，配置webpack的相关服务：

npm install --save-dev webpack-dev-server

经过以上操作，package.json文件中，多出以下一段代码：

（4）配置在第一步创建的webpack.config.js文件：

如图所示：app文件夹中需要有index.js文件，可以随便写一些js代码进去，然后在build文件夹中需要有bundle.js文件，它就是打包文件。

(5）打包文件的使用：

 在build文件夹中新建一个index.html文件，引入同目录下的bundle.js文件。

配置快速启动webpack，在package.json文件里加入

 "scripts": {
     "start": "webpack",
     "server": "webpack-dev-server --open"
   },

到此，我们的package.json文件里的内容是这样的：

如果有哪里不对的，小伙们记得自己检查一下啊。

(6)运行终端，打包js文件到bundle.js

在终端中，定位到当前文件夹webpack---cd 当前目录

然后执行webpack命令，webpack就已经开始运行了：

（7）之后去运行index.html页面，就能看到效果了。

B：CSS文件的引用

 经过了引入JS的操作，引入CSS文件的操作就简单多了

（1）首先，我们需要下载css样式加载模板的文件

npm install style-loader css-loader --save

（2）在配置文件中，加入以下代码：

这里尤其需要注意的一点是，在运行终端之前，

需要在index.js文件中，引入index.css文件，以便于二者一并被打包起来。

现在的终端界面是这样的：

细心的小伙伴可能发现了，刚才的那张终端截图，它只监控着index.js的运行，

而上面这张，加入了css的监控和打包，是不是很神奇啊

另外还有一点需要注意的是，加完上述打包css的代码后，需要重新运行打包命令哦，

否则会显示一个“模块加载失败，你可能需要一个适合的加载器加载这个文件”的错误，小伙伴们注意一下哈。

这样，我们就可以在index.html引入包含css和js的bundle.js打包文件了，

在css文件和js文件中编辑会实时在bundle.js中展现在index.html文件中