learn-webpack（lesson01）

该项目地址：https://gitee.com/lxx147258/learn-wepack

前言

webpack旨在模块化开发中根据依赖关系打包所有资源（html、css、js、image等）。下面就跟我一起初识一下webpack的魅力吧。

初步体验实施步骤

1. 在一个“任何你喜欢的地方”创建一个目录（我这里就是D:\lesson01），在该目录下初始化我们的项目，使用命令：（-y：生成默认的配置选项）

D:\learn-webpack\lesson01>npm init -y

2. 安装相关依赖（i: install的简写，译为安装；-D：--save-dev的简写，译为开发依赖），这里使用的是webpack4

D:\learn-webpack\lesson01>npm i webpack webpack-cli -D

3. 在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);
}

4. 执行打包命令，这样webpack就会以index.js文件为入口文件，根据相关依赖进行打包，最终输出到根目录（这里为lesson01）的dist目录（dist目录名为默认输出目录）下的main.js文件（main.js文件名为默认输出文件）

D:\learn-webpack\lesson01>webpack index.js

5. 在lesson01目录下新建index.html文件，并引入打包后的main.js文件

// index.html文件代码



    
    


    

6. 用浏览器打开index.html，按F12，就可以在控制台（console）里看到输出的结果

   
   
   index.png