开发者社区> 前端王睿> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Webpack轻松入门(一)——基本流程

简介: 很多还未接触或刚接触Webpack的朋友总会觉得Webpack很难,要安装这个安装那个,要写一大堆的配置,要输一大堆的命令,还要学一大堆的语法,觉得学习成本太高,不用它代码也可以写得很好。
+关注继续查看

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

一、Webpack简介

1. 核心

① 入口(entry)
② 输出(output)
③ loader
④ 插件(plugins)

2. 优势

① 模块化开发(import,require)
② 预处理(Less,Sass,ES6,TypeScript……)
③ 主流框架脚手架支持(Vue,React,Angular)
④ 庞大的社区(资源丰富,降低学习成本)

详情请戳→我为什么要使用Webpack?

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

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

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

Terminal

3. 安装Webpack

依次输入命令行npm i -D webpacknpm i -D webpack-cli回车进行本地安装,其中iinstall的缩写,-D--save-dev的缩写,也就是说这两个命令行也可以写成npm install --save-dev webpacknpm install --save-dev webpack-cli

安装后的目录结构如下:


package.json文件如下:

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14"
  }
}

4. 新建webpack.config.js文件

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

module.exports = {
    entry: './src/scripts/index.js',    // 需要被打包的js文件路径及文件名
    output: {
        path: __dirname + '/dist',    // 打包输出的目标文件的绝对路径(其中__dirname为当前目录的绝对路径)
        filename: 'scripts/index.js'   // 打包输出的js文件名及相对于dist目录所在路径
    }
};

三、开始打包

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

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

//index.js
alert('Hello Webpack!');

2. 开始打包

输入命令行:npx webpack,回车。

由于我们已经在webpack.config.js文件配置了打包的相关路径及文件名,所以最终打包后我们就可以在dist目录下看到我们想要的输出结果,打包后整体目录结构如下:


3. 使用打包后的js代码

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

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


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="scripts/index.js"></script>
</body>
</html>

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

本文重点总结:

成功运行Webpack基本流程如下:
① 安装node.js
② 创建项目目录和新建package.json
③ 安装webpack和webpack-cli
④ 新建webpack.config.js
⑤ 开始打包你的js代码

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
webpack 内部工作流程
webpack 内部工作流程
21 0
初入Webpack(一)
什么是Webpack?
18 0
02-webpack的基本配置和输入webpack实现自动打包
02-webpack的基本配置和输入webpack实现自动打包
30 0
Webpack 简介
构建其实是工程化、自动化思想在前端开发中的体现,把一系列流程用代码去实现,让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力,解放了我们的生产力。
45 0
Webpack-01:Webpack简介
Webpack-01:Webpack简介
38 0
webpack 从入门到放弃(一)
什么是 webpack,为什么要使用 webpack 什么是 webpack 官网给出的概念是: 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
1953 0
webpack笔记1
webpack是一个模块打包工具 1.webpack不仅支持CommonJS——支持同步依赖2.而且也支持AMD——支持异步依赖3.webpack只能加载本地的Javascript,通过一系列的加载器可以实现不同静态资源的加载 1.
705 0
webpack指南-webpack入门-开始使用webpack
webpack用来在你的app中建立JS模块。为了从cli或api开始使用webpack,按照安装手顺即可。 webpack通过快速构建app依赖图并以正确顺序打包来简化工作。
1153 0
+关注
前端王睿
3年Web前端开发工程师,目前就职于上海知名媒体&mdash;&mdash;新闻晨报,个人公众号:前端微站
65
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载