1. webpack基本概念
目标: webpack本身是, node的一个第三方模块包, 用于打包代码
-
现代 javascript 应用程序的 静态模块打包器 (module bundler)
-
为要学的 vue-cli 开发环境做铺垫
==webpack能做什么==
把很多文件打包整合到一起, 缩小项目体积, 提高加载速度(演示准备好的例子)
其中功能:
-
less/sass -> css
-
ES6/7/8 -> ES5
-
html/css/js -> 压缩合并
2. webpack的使用步骤
2.0_webpack基础使用
目标: 把src下的2个js文件, 打包到1个js中, 并输出到默认dist目录下
默认入口: ./src/index.js
默认出口: ./dist/main.js
==注意:路径上, 文件夹, 文件名不能叫webpack/其他已知的模块名==
-
初始化包环境
yarn init
-
安装依赖包
yarn add webpack webpack-cli -D
-
配置scripts(自定义命令)
scripts: { "build": "webpack" }
-
新建目录src
-
新建src/add/add.js - 定义求和函数导出
export const addFn = (a, b) => a + b
-
新建src/index.js导入使用
import {addFn} from './add/add' console.log(addFn(10, 20));
-
运行打包命令
yarn build #或者 npm run build
总结: src并列处, 生成默认dist目录和打包后默认main.js文件
2.1_webpack 更新打包
目标: 以后代码变更, 如何重新打包呢
-
新建src/tool/tool.js - 定义导出数组求和方法
export const getArrSum = arr => arr.reduce((sum, val) => sum += val, 0)
-
src/index.js - 导入使用
import {addFn} from './add/add' import {getArrSum} from './tool/tool' console.log(addFn(10, 20)); console.log(getArrSum([1, 2, 3]));
-
重新打包
yarn build
总结1: src下开发环境, dist是打包后, 分别独立
总结2: 打包后格式压缩, 变量压缩等
3. webpack的配置
3.0_webpack-入口和出口
目标: 告诉webpack从哪开始打包, 打包后输出到哪里
默认入口: ./src/index.js
默认出口: ./dist/main.js
webpack配置 - webpack.config.js(默认)
-
新建src并列处, webpack.config.js
-
填入配置项
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.打包观察效果