learn-webpack（lesson01）
2019-03-15 本文已影响0人
L147
该项目地址：https://gitee.com/lxx147258/learn-wepack
前言
webpack旨在模块化开发中根据依赖关系打包所有资源（html、css、js、image等）。下面就跟我一起初识一下webpack的魅力吧。
初步体验实施步骤
- 在一个“任何你喜欢的地方”创建一个目录（我这里就是D:\lesson01），在该目录下初始化我们的项目，使用命令：（-y：生成默认的配置选项）
D:\learn-webpack\lesson01>npm init -y
- 安装相关依赖（i: install的简写，译为安装；-D：--save-dev的简写，译为开发依赖），这里使用的是webpack4
D:\learn-webpack\lesson01>npm i webpack webpack-cli -D
- 在lesson01目录下新建文件index.js和sum.js文件
// index.js文件代码
import sum from './sum.js';
sum(1, 2);
// sum.js文件代码
export default function sum(num1, num2){
console.log(num1 + num2);
}
- 执行打包命令，这样webpack就会以index.js文件为入口文件，根据相关依赖进行打包，最终输出到根目录（这里为lesson01）的dist目录（dist目录名为默认输出目录）下的main.js文件（main.js文件名为默认输出文件）
D:\learn-webpack\lesson01>webpack index.js
- 在lesson01目录下新建index.html文件，并引入打包后的main.js文件
// index.html文件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>
-
用浏览器打开index.html，按F12，就可以在控制台（console）里看到输出的结果
index.png
