一、IDE的选择
前端工程师一般都会选择VS code,本人有java后端的开发经验,还是习惯IntelliJ IDEA,这个软件是收费的,这里就是学习使用,要用于商业请购买正版!
二、创建工程目录
我们可以创建一个文件夹,控制台 cd /Users/**/**/创建的文件名称,执行npm init ,本章就学习webpack默认配置,所以默认选则就行。
三、安装webpack webpack-cli
在工程目录执行 npm i webpack webpack-cli -D 进行本地下载安装。
ps:这里有个提示npm 6.10.3 升级至 6.14.2 可以忽略。
当然我们也可以用IDE工具打开工程,查看package.json文件,查询当前webpack版本。
四、webpack打包js文件
1. 现在我们在工程目录中创建一个js文件,阅读webpack源码的朋友,可以知道webpack 默认检索js文件必须是在src文件夹下,当然后面也会介绍如何进行修改!
2.在工程目录,执行npx webpack 命令。一般IDE都会有控制台,这里我在Intellj IEDA 控制台直接执行
ps:警告中提示我们没有配置webpack 的mode默认生产环境,后续会有配置讲解说明。
我们在看下文件数据,webpack在0配置的情况下,默认创建了一个dist 文件并输出了一个main.js文件。我们在执行下js文件看下是不是会输出‘hello webpack’
3.在创建一个a.js进行模块化打包,改造如下
然后在执行命令 npx webpack 进行打包执行。
五、 HTML 引用打包的js文件在浏览器加载
这里就在src 下创建一个html 引用已经打包的js,后面会讲解使用插件打包html 并引用js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Title</title>
</head>
<body style="background: gray">
<script type="text/javascript" src="../dist/main.js"></script>
</body>
</html>
加载运行,查看控制台输出
源码下载
创建文件夹,cd至已创建文件夹,执行 git clone https://gitee.com/dolan_ge/webpack.git -b webpack_load_css
。
进入工程目录,执行 npm install -D
。