概念
作用
压缩代码
快速入门
-
npm init 初始化包环境
-
npm install webpack webpack-cli -D 安装依赖包
-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.js' console.log(addFn(10,20));
-
运行打包命令
npm run build
更改webpack的设置
修改出入口
默认入口:‘./src/index.js’
默认出口:‘./dist/main.js’
-
新建src并列处,webpack.config.js
-
填入配置项
const path = require('path') module.exports = { entry: './src/index.js',//入口 output: { path: path.join(__dirname, 'dist'),//出口路径,输出到同级下的dist目录中 filename: 'main.js',//出口文件名 } }
ES6模块化语法
导入
import {名称} from '模块' //配合export使用
import dayjs from 'dayjs' //配合export default使用
导出
export const 名称 = 数据
export default dayjs //一个js文件只能有一个默认导出
补充
git忽略文件
-
在项目根目录下创建.gitignore文件
-
node_modules