webpack入门，让你不在难

什么是webpack？

           webpack是前端一个工具，可以让各个模块进行加载，预处理，再进行打包，它能有Grunt或Gulp所有基本功能。优点如下：

1. 支持commonJS和AMD模块。

2. 支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。

3. 可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。

4. 使用模块加载器，可以支持sass，less等处理器进行打包且支持静态资源样式及图片进行打包。

如何安装、配置？

            笔者以最基本的入门来讲解安装及配置的步骤，希望能够让大家很容易的理解webpack的入门。

步骤1：生成package.json文件

npm init

步骤2：建立相关文件夹和文件

说明：

src：文件为开发过程中编写文件

dist：为webpack执行编译后的文件

node_modules:为安装webpack后生成的文件，及放其他配置需要的文件

package.json:npm的配置文件

webpack.config.js:webpack的配置文件

步骤3：配置webpack.config.js

步骤4：运行

上面为运行的执行语句，下面为运行后生成的文件

如出现上面的运行效果，则表示webpack的安装与配置已经完成。下面我们将对应的步骤使用思维导图来展示。

对应的思维导图和代码下载

导图：

可能效果不是很好，大家可以在这里下载：

思维导图：https://pan.baidu.com/s/1gfwxm19

操作代码：https://pan.baidu.com/s/1o8wiUPO

代码下载后，直接进入到webpack-xmind文件夹，使用npm run webpack就可以看到生成的bundle.js文件

未

完

待

续

下期将提供webpack基本应用的思维导图及加载器、插件的demo源码。

如果您认为此篇文章不错，请推广，谢谢！

---

  微信订阅号：全栈工程师成长记（qzgcsczj）

目前阶段：

        以个人学习前端技术，来记录如何入门，如何填坑，如何成长，记录过程中可能知识零散，没有整合，如有问题直接添加个人微信号，交流学习；

未来阶段：

        整合个人学习技术，形成书签式的记录分享，为大家填坑，能够尽量少走弯路，成为全栈工程师。

如有兴趣一起学习，一起进步的朋友可以关注微信公众号号，互相交流进步。

---