webpack的简单使用

最新推荐文章于 2024-11-10 15:10:09 发布

兰芷-满汀洲

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量133

点赞数

文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/malemalele/article/details/120607947

版权

本文介绍了如何安装和使用Yarn作为依赖管理工具，包括初始化、添加、移除和安装依赖。接着讲解了Webpack的基本概念，如模块打包器的角色，以及在项目中的实际应用，包括设置入口和出口、打包及更新过程。最后，通过配置Webpack解决默认入口和出口的问题。

摘要由CSDN通过智能技术生成

一、yarn的安装与使用

yarn是一个快速、可靠、安全的依赖管理工具 ,与npm类似

1、下载

下载地址:安装 | Yarn 中文文档

建议和node安装到一个盘符下

2、使用yarn

(1). 初始化, 得到package.json文件(终端路径所在文件夹下)

yarn init

类似于npm init

(2). 添加依赖(下包)

yarn add jquery

类似于 npm install jquery

(3). 移除包

yarn remove jquery

类似于 npm remove jquery

(4). 安装项目全部依赖(一般拿到别人的项目时, 缺少node_modules)

yarn

类似于npm i

(5). 全局

yarn global add @vue/cli

类似于 npm install -g @vue/cli

二、webpack

1、概念

(1)、使用场景

开发完项目, 可以用node+webpack来分析, 翻译, 压缩, 打包, 加快浏览器打开速度

(2)、概念

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

静态: 文件资源
模块: node环境, 引入文件, 遵守模块化语法

除了合并代码, 还可以翻译和压缩代码

less/sass -> css
ES6/7/8 -> ES5
html/css/js -> 压缩合并

2.webpack-使用前-准备

webpack依赖Node环境 ,因此需要npm或者yarn等模块管理工具

步骤

创建Day01_webpack基础使用文件夹
初始化包环境

yarn init

3、安装依赖包

yarn add webpack webpack-cli -D

4、在package.json中, 配置scripts(自定义命令)

scripts: {
	"build": "webpack"
}

3.webpack-基础使用

步骤

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

4.webpack-更新打包

步骤

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));
console.log(getArrSum([5, 6, 9, 10]));

3.重新打包

yarn build

5.webpack-配置修改

目标

修改默认入口和出口

默认入口: src/index.js

默认出口: dist/main.js

步骤

1.项目根目录 - 新建webpack.config.js文件 (默认配置文件名)

2.填入配置项

const path = require("path")

module.exports = {
    entry: "./src/main.js", // enter: 默认入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口"文件夹"名
        filename: "bundle.js"               // 出口"文件"名
    }
}

3.修改代码里src/index.js 为 src/main.js

4.重新打包