webpack打包工具

约定不等于承诺〃 2023-08-17 17:30 133阅读 0赞

**一、webpack基本使用**  
1.新建空白文件（目录）文件名不能是webpack，运行 npm init -y （路径中不能有中文），初始化package.json文件  
2.创建src源代码目录  
3.在src下创建index.html  
4.初始化首页基本的结构  
5.下载页面需要的依赖包

**二、在项目中安装和配置webpack**  
1.运行 npm install webpack webpack-cli –D ，安装webpack相关工具  
2.在项目根目录创建webpack.config.js文件，配置文件  
3.在webpack文件中添加  
module.exports = \{  
mode: 'development' // mode 用来指定构建模式  
\}  
4.在package.json中  
"scripts":\{//添加  
"dev":"webpack"  
\}  
5.在终端中运行 npm run dev 启动webpack进行项目打包

**三、打包的入口和出口**  
1.webpack 默认  
入口文件：src:index.js  
出口文件：dist:main.js

2.需要修改默认文件时 在module.exports中添加  
entry: path.join(\_\_dirname, './src/index.js'),//打包入口路径  
output: \{  
path: path.join(\_\_dirname, './dist'),//出口路径  
filename: 'bundle.js'//出口文件名称  
\}

**四、webpack 自动打包功能**  
1.运行npm i webpack-dev-server -D命令 安装自动打包工具  
2.修改package.json 的dev:"webpack-dev-server"  
3.修改html页面的引用script脚本的路径 src="/bundle.js"  
4.运行npm run dev进行重新打包  
5.在浏览器中访问http://localhost:8080

在浏览器中预览页面

配置自动打包相关参数 （打包过后，会自动按照下面方式打开）  
\--open 默认浏览器  
\--host 127.0.0.1  
\--port 端口

修改配置文件都需要重新打包一次

转载于:https://www.cnblogs.com/yangxiaobai123/p/11351237.html

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关 09_Webpack打包工具

1 初识Webpack 1.1 什么是Webpack Webpack打包工具对项目中的复杂文件进行打包处理，可以实现项目的自动化构建，并且给前端开发人员带来了极大的

浅浅的花香味﹌/ 2024年02月22日 08:48/ 0 赞/ 49 阅读

相关 webpack打包工具

一、webpack基本使用 1.新建空白文件（目录）文件名不能是webpack，运行 npm init -y （路径中不能有中文），初始化package.json文件

约定不等于承诺〃/ 2023年08月17日 17:30/ 0 赞/ 134 阅读

相关 Webpack打包工具

文章目录 1，webpack需要npm安装 2，使用webpack打包工具，就不用在html页面引用js文件了，如何引用？ 3，webpack打包命令

不念不忘少年蓝@/ 2023年06月04日 12:59/ 0 赞/ 40 阅读

相关 Webpack打包工具详解

什么是Webpack? webpack是一种前端资源构建工具一个静态模块打包器在webpack看来前端所有资源文件都会作为模块处理他将根据模块的依赖关系进

缺乏、安全感/ 2022年12月22日 04:44/ 0 赞/ 225 阅读

相关【Webpack】模块打包工具 Webpack 的各种使用方式

1. Webpack 简介 Webpack 是一个现代 JavaScript 的静态模块打包器(module bundler)；那为什么要用这种构建工具进行

淩亂°似流年/ 2022年12月17日 07:30/ 0 赞/ 373 阅读

相关四、webpack打包工具

webpack打包工具 Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块

ゞ浴缸里的玫瑰/ 2022年04月10日 02:21/ 0 赞/ 326 阅读

相关 Webpack前端打包工具

1、概述 Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。中文官方网站：[https://www.webpack

忘是亡心i/ 2022年04月06日 07:56/ 0 赞/ 324 阅读

相关 webpack模块打包工具

webpack模块打包工具从上文看webpack很像是JS的翻译器，其实这个定义是不准确的，webpack只认识import这样的语法，很多高级的JS代码并不认识。

比眉伴天荒/ 2022年01月10日 14:23/ 0 赞/ 375 阅读

相关 webpack打包工具

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

￡神魔★判官ぃ/ 2021年09月16日 17:34/ 0 赞/ 600 阅读

相关 webpack前端打包工具

前言 webpack是前端人员常用到的打包工具，包括vuecli搭建自带的webpack. 什么是webpack? webpack可以理解为，将程序员编写的源代码

妖狐艹你老母/ 2021年07月26日 01:33/ 0 赞/ 540 阅读