webpack的基本概念

1.webpack能做什么？
能够将很多文件打包整合到一起，缩小项目体积，提高加载速度。
2.webpack的使用步骤。
2.0-webpack的基础使用
1.初始化包环境 yarn init。
2.安装依赖包 yarn add webpack webpack-cli -D。
3.配置script（自定义命令）
scripts: {
“build”: “webpack”
}
4.新建src目录文件
5.新建src/add/add.js- 定义求和函数导出
export const addFn = (a, b) => a + b。
6.新建src/idnex.js 导入使用
import {addFn} from ‘./add/add’
console.log(addFn(10, 20));
7.运行打包命令
yarn build 或 npm run bulid 。
src并列处，生成默认dist目录和打包后默认的main.js文件
3.webpack的配置
3.0-webpack-入口和出口
默认入口：./src/index/js
默认出口:./dist/main.js
webpack配置 - webpack.config.js(默认)
1.新建src并列处, webpack.config.js
2. 填入配置项
const path = require(“path”)
module.exports = {
entry: “./src/main.js”, // 入口
output: {
path: path.join(__dirname, “dist”), // 出口路径
filename: “bundle.js” // 出口文件名
}
}
3.修改package.json, 自定义打包命令 - 让webpack使用配置文件
“scripts”: {
“build”: “webpack”
},
4.打包观察效果