Webpack轻松入门(一)

很多还未接触或刚接触Webpack的朋友总会觉得Webpack很难,要安装这个安装那个,要写一大堆的配置,要输一大堆的命令,还要学一大堆的语法,觉得学习成本太高,不用它代码也可以写得很好。是的,但是别担心,本系列教程将会通过一些简单实例带你轻松入门Webpack,相信当你真正掌握它的时候,你一定会爱上它的!

一、Webpack简介

1. 核心

① 入口(entry)

② 输出(output)

③ loader

④ 插件(plugins)

2. 优势

① 模块化开发(import,require)

② 预处理(Less,Sass,ES6,TypeScript……)

③ 主流框架脚手架支持(Vue,React,Angular)

④ 庞大的社区(资源丰富,降低学习成本)

3. 初学者误区

① 要学会node.js

② 只能用于简单的代码压缩合并

③ 上线时要将整个项目文件上传服务器

以上几条都是初学者比较容易产生的误区,而事实上……

① 我们确实需要安装node.js,但基本只是需要它提供的环境及npm而已,你不一定要掌握node.js语法

② Webpack非常强大,不仅仅可以实现代码的压缩合并,还能进行一些预编译处理以及模块化开发等

③ 我们只需要将Webpack打包出来的文件目录上传到服务器即可,而不是上传整个项目文件

二、准备工作

1. 安装node.js

Webpack本身是基于node.js环境的,所以我们需要先安装node.js,具体方法可以看这里→Node.js——通往全栈之路(一)。

2. 新建项目

① 创建目录结构

在新创建的项目文件夹下,创建两个基础文件夹:srcdist,其中src是我们开发时源代码所放置的文件夹,dist是我们使用Webpack打包后代码输出的目标文件夹,也就是说最终我们上传服务器的代码都是从dist文件夹下获取。目录结构大致如下:

② 新建一个package.json文件

package.json文件是在node.js环境下开发项目必须要使用到的文件,该文件主要用于配置项目入口、脚本和项目所需安装的依赖等等。我们可以自己手动创建,也可以通过命令行自动创建它。命令行创建很简单,直接在控制台终端输入,然后一直回车即可轻松创建一个最基础的package.json文件。

小贴士:建议使用开发工具中自带的控制台终端,非常方便,自动定位当前项目文件夹,无需手动切换。比如我使用的开发工具是WebStorm,控制台终端如下图:

3. 安装Webpack

依次输入命令行和回车进行本地安装,其中是的缩写,是的缩写,也就是说这两个命令行也可以写成和。

安装后的目录结构如下:

package.json文件如下:

该文件是Webpack的配置文件,也是项目运行的入口文件,基础写法如下:

三、开始打包

1. 新建需要被打包的js文件

我们给这个index.js文件写入点代码:

2. 开始打包

输入命令行:,回车。

3. 使用打包后的js代码

现在我们已经获得打包后的代码,接下来我们应该使用它,测试它是否能正常运行。

我们可以在dist目录下手动创建一个HTML文件,并引入这个已经打包成功的js文件。目录结构及HTML代码如下:

打开这个index.html页面后,我们发现浏览器弹出“Hello Webpack!”提示框,说明代码确实已经打包成功。

本文重点总结:

结束语:本文只是对Webpack成功打包js代码的最基础讲解,如需了解更多Webpack相关内容,请持续关注本系列教程,谢谢!

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180416G0138000?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券