webpack入门案例

加粗样式# 一. 引入webpack的理由

1.前端工程化，面向大前端思维。

        自node.js诞生以来，前端趋向工程化、后端化，那么如何通过简单有效的方式将前端的各种资源文件规模打包，如何将各个资源引用的次数解耦到一个比较低的水平是前端开发人员需要学习的内容，那么webpack是其中比较受欢迎的一个处理工具。通过webpack以及node.js所支持的npm包管理工具,我们可以通过webpack快速构建前端项目，无需我们手动建立项目宏观目录，实现项目自动化构建。

2. 网页速度加载不够快，存在静态资源的多次请求

        webpack可以将例如css、js、图片(base64编码解决小图片的加载)、模板文件等相关的资源文件进行打包整合，通过node或者esX语言进行打包以及整合处理。

3.ES6或者更高版本的ES.X以及Node.js的浏览器兼容问题。

        es6和node虽然已经诞生多年，但是大多数浏览器很大程度上不支持es或者node的语法，给前端程序员撸码造成极大困扰，例如import导包语句就不能被正确解析。通过webpack打包工具以及其下的各种插件工具，我们可以轻松实现语法解析，生成浏览器能理解的js语言。

二. webpack的简单使用

        使用webpack之前需要您手下下载node，如果不了解node，请于node官网下载node.js基于windows的msi包，无需配置path环境。您可以使用windows+r键打开运行窗口，输入cmd打开控制台，接下来输入node -v 查看node安装版本。
接下来请和我一起安装webpack并且实现一个最简单的demo!

1. 局部安装webpack3.X

        因为webpack现在已经是4.X版本，需要引入webpack-cli客户端工具以及可能带来插件之间的不兼容问题，我们来安装webpack3.X版本。注意:("")双引号中的为命令,手敲或者拷贝的时候不要误敲了。首先建立webpack工作目录, 在控制台输入 (d:), (mkdir webpack-demo && cd webpack-demo)。因为是国外镜像， 使用npm包管理工具下载资源文件会很慢，首先输入(npm install -g cnpm --registry=http://registry.npm.taobao.org )安装阿里的淘宝镜像下载我们所需要的文件。输入（npm init -y）初始化npm项目环境,这个时候会生成一些node的npm工具相关的配置以及资源目录，这个时候不用管它们，我们来完成安装即可，programer就是得先敲再会！输入(cnpm install webpack@3.6.0 --save-dev)，注意，如果不使用cnpm install webpack@3.6.0 ，而去掉 @3.6.0将会下载webpack的最新版本。

2. 使用webpack命令打包相关文件

        在webpack-demo目录下建立src、dist目录。在src下建立index.html和index.js文件。index.js中输入alert(“我爱你中国!”),index.html head 标签中输入。打开终端，输入(D:\Monkey\node_modules.bin\webpack .\src\index.js .\dist\bundle.js)出现以下提示(见图片):

        最后通过浏览器打开index.html出现“我爱你中国”的弹出框即代表demo完美运行~

3. 项目完整目录结构如下(编译器为HbuiderX):

点击下载HbuilderX

本文命令解释:

1. npm init -y:

        npm下的init子命令用于生成快速构建基于npm下的项目工程的package.json文件,有兴趣的同学可以去查下关于package.json文件的描述。选项y是省去了回车的步骤。

2. npm install XXX --save-dev

        npm下的 install 命令可以快速添加npm生态圈内的XXX包，并且自动导入到node_modules中，例如我们可以在node_modules里的bin目录下找到webpack命令,可以在node_modules下的找到webpack包,选项–save-dev代表将模块安装到项目目录下，并在package文件的devDependencies属性写入依赖。

3. webpack

        webpack用于打包相关文件