Vue(双元+面授) webpack

本文详细介绍了Webpack的使用,从基本概念到配置文件,包括如何处理CSS、LESS文件,处理图片和字体文件,以及使用开发服务器。通过实例展示了如何配置html-webpack-plugin生成HTML文件,解决高版本JS语法问题,并使用开发服务器进行实时编译。
摘要由CSDN通过智能技术生成

webpack文档: 概念 | webpack 中文文档

1. 什么是webpack?

     概念: 静态模块打包工具
     本质: node环境, 第三方模块包 (nodejs代码)

 
2. 使用
    前提: node+npm/yarn 软件环境
    初始化包环境 yarn init 得到package.json文件 记录你下的
    下载webpack模块 yarn add webpack webpack-cli
     配置自定义命令 scripts: { "build": "webpack"}
     编写逻辑代码 必须在src/入口js文件内, 直接/间接 引入关系才会被打包
     执行yarn build 打包后的代码放到dist/

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

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

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

// webpack打包的入口
import { addFn } from './add/add'
console.log(addFn(5, 2));

 3. 运行打包命令

yarn build

效果

  1. src并列处, 生成dist目录和main.js文件

  2. 查看main.js文件, 是打包压缩后的代码

  3. (()=>{"use strict";console.log(7)})();

4. 打包关系图 

 

 1. 新建src/tool/tool.js - 导出数组求和方法

export const getArrSum = arr => arr.reduce((sum, val) => sum += val, 0)

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

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

console.log(addFn(5, 2));
con
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值