webpack基础使用

1. webpack基本概念


目标: webpack本身是, node的一个第三方模块包, 用于打包代码

webpack官网

  • 现代 javascript 应用程序的 静态模块打包器 (module bundler)

  • 为要学的 vue-cli 开发环境做铺垫

==webpack能做什么==

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

2. webpack的使用步骤


2.0_webpack基础使用

目标: 把src下的2个js文件, 打包到1个js中, 并输出到默认dist目录下

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

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

==注意:路径上, 文件夹, 文件名不能叫webpack/其他已知的模块名==

  1. 初始化包环境

yarn init

  1. 安装依赖包

yarn add webpack webpack-cli -D

  1. 配置scripts(自定义命令)

scripts: {

"build": "webpack"

}

  1. 新建目录src

  1. 新建src/add/add.js - 定义求和函数导出

exportconstaddFn= (a, b) =>a+b

  1. 新建src/index.js导入使用

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

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

  1. 运行打包命令

yarn build

#或者 npm run build

总结: src并列处, 生成默认dist目录和打包后默认main.js文件

2.1_webpack 更新打包

目标: 以后代码变更, 如何重新打包呢
  1. 新建src/tool/tool.js - 定义导出数组求和方法

exportconstgetArrSum=arr=>arr.reduce((sum, val) =>sum+=val, 0)

  1. src/index.js - 导入使用

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

import {getArrSum} from'./tool/tool'

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

console.log(getArrSum([1, 2, 3]));

  1. 重新打包

yarn build

总结1: src下开发环境, dist是打包后, 分别独立
总结2: 打包后格式压缩, 变量压缩等

3. webpack的配置


3.0_webpack-入口和出口

目标: 告诉webpack从哪开始打包, 打包后输出到哪里

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

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

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

  1. 新建src并列处, webpack.config.js

  1. 填入配置项

constpath=require("path")

module.exports= {

entry: "./src/main.js", // 入口

output: {

path: path.join(__dirname, "dist"), // 出口路径

filename: "bundle.js"// 出口文件名

}

}

  1. 修改package.json, 自定义打包命令 - 让webpack使用配置文件

"scripts": {

"build": "webpack"

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值