webpack使用方法

什么是webpack？

webpack本身是, node的一个第三方模块包, 用于打包代码。webpack官网

webpack能做什么？

把很多文件打包整合到一起, 缩小项目体积, 提高加载速度：

• less/sass ---> css
• ES6/7/8 ----> ES5
• html/css/js ---> 压缩合并

webpack使用步骤：

下载yarn:

 下载地址: 地址

新建文件夹：

1.在当前文件夹切换到cmd中初始化包环境

yarn init

2.安装依赖包

yarn add webpack webpack-cli -D

安装好之后的文件夹是这样的

3.配置scripts(自定义命令)  打开package.json文件

scripts: {    
    "build": "webpack"
}

4.新建目录src ，新建src/add/add.js - 定义求和函数导出 

 在add/add.js里面写代码：

export const addFn = (a, b) => a + b

在index.js 导出add/add.js写的代码：

import { addFn } from './add/add'

console.log(addFn(10, 20));

5.运行打包命令

yarn build（因为我用的是yarn）
#或者 npm run build

6.查看打包后的文件

注：打包后会自动生成dist文件夹和main.js文件(这是默认的打包文件)

7.更改webpack入口和出口

默认入口: ./src/index.js

默认出口: ./dist/main.js

webpack配置 - webpack.config.js(默认)

• 在src并列处新建webpack.config.js文件
• 填入配置项

 更改完之后，需要重新运行yarn bulid 查看（首先是要把之前dist文件夹删了）

点个赞支持一下啦 嘿嘿~