0基础手把手教你搭建webpack运行打包项目（未完待续）

这些天在项目之余的时间学习了webpack打包项目的东西，非常荣幸的找到一些大神的文章来学习，死劲嚼了几天，终于略知一二。在以后的工作上还需继续学习，下面我将分享我这几天学到的一点东西，希望能让我一个还不算入门webpack的小白领大家入门。本文主要还是摘抄大神的文章加上自己手动的一些过程记录，不喜勿喷，谢谢！开车了！！！开车了！！！

一、什么是Webpack

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。

webpack的工作原理：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

二、webpack的使用

1、项目初始化

webpack安装完成后，我们紧接着输入命令来初始化项目，初始化命令：npm init; 在初始化的过程中，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。

这时候，目录中会生成一个package.json文件，这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。

2、安装webpack

新建一个项目目录，打开终端进入新建的目录输入命令安装webpack：

全局安装：npm inatsll webpack -g; 跟随目录安装：npm inatsll --save-dev webpack;

3、项目构建

在根目录新建app和public两个目录与及一个配置文件webpack.config.js，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件），接着我们在app目录下分别新增main.js文件和project.js文件，在public目录下新增index.html文件。

目录结构如图所示：

下面我们看看每个文件的代码，与及运行的一些过程结果：

index.html文件：

main.js 文件：

project.js文件：

webpack.config.js文件：这里的配置是指定main.js文件是我们唯一的入口文件，而bundle.js文件是我们打包后输出的文件名，与及我们打包后存放的路径。

置于entry和output这写webpack的属性词代表什么，我在这里就不做解释了，可以去webpack中文文档学习，链接：https://doc.webpack-china.org/concepts/

package.json文件：

各文件配置好后，我们在命令行输入：npm start, 这是项目就开始打包文件了：

我们可以看到webpack把我们的main.js文件和project.js文件进行了编译,编译完成后我们可以发现在public目录下自动生成了一个编译后的bubundle.js文件。然后我们就可以在浏览器打开我们的index.html文件了，并且能正常打开。如图所示：

恭喜你，现在你已经学会了webpack最基础的打包方式。

三、稍微的进阶一下

1、使用webpack构建本地服务

构建本地服务之后，浏览器会监听你代码的修改，并且自动刷新更改的结果。接下来我们就安装这个依赖包，

服务依赖包：npm install --save-dev webpack-dev-server, devserver作为webpack配置选项中的一项，以下是它的一些配置选项，更多配置可参考

把这些命令加到webpack的配置文件中，现在的配置文件webpack.config.js如下所示

注意了哈，package.json这里配置有个小细节，就是我们平时run代码的时候大多数是输入：npm run dev, 那是因为在package.json里面配置了如图所示：

如果用默认的server来配置的话，run项目时直接输入：run server， 即可。另外，当我们的port属性不设置时，默认的端口号是：8080，但是上面我们改为8088了，如图所示：

2、Loaders的安装和配置

Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件。

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：

3、babel的配置

Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到以下目的：