webpack的使用与配置

最新推荐文章于 2024-03-31 16:50:23 发布

StupidFrontEnd

最新推荐文章于 2024-03-31 16:50:23 发布

阅读量195

点赞数 2

文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/m0_58118986/article/details/133752567

版权

vue

1: 是一套框架，用于构建用户界面的渐进式框架。

2: vue主要是从基础知识、组件的了解、动画的过渡、可复用性和组合以及工具、模块化的管理。

Vue-cli

vue-cli 是一个基于 Vue.js进行快速开发的完整系统。

vue-cli 主要是从搭建交互式脚手架、零配置原型开发、基于webpack构建并进行配置、插件和Preset的扩展以及图形化的创建和Vue.js项目的用户界面管理等。

区别：

vue是一整套框架，而vue-cli只是它其中的一个脚手架

关联：

vue-cli 是vue的命令行工具
一个完整的vue项目核心构成

vue-cli和webpack是什么关系：

vue-cli是vue的命令行工具，只要按照官网敲几行命令就可以新建一个基本的vue项目框架。方便快捷。(command-line interface - 简称 cli)

vue-cli 里面包含了webpack，并且配置好了基本的webpack打包规则

Vue-cli2 是基于webpack 3，而 vue-cli3 是基于 webpack 4 的。

webpack介绍

现代 javascript 应用程序的 静态模块打包器 (module bundler)
把很多文件打包整合到一起, 缩小项目体积, 提高加载速度

ES6/7/8 -> ES5 处理js兼容
支持js模块化
处理css兼容性
html/css/js -> 压缩合并

为什么需要webpack

使用 Vue 脚手架，为什么要学 webpack？_vue一定要用webpack吗_前端人的博客-CSDN博客

浏览器的运行效率问题

我们如果不使用任何打包工具，还是按照最原始的写法，其实在开发中就会变得麻烦，比如说我们如果编写的代码文件比较多，此时我们就需要发送多次http请求，如果其中一个文件没有请求回来，此时如果下面的文件对该文件存在一些依赖，就会导致页面中的部分功能没有办法实现。

再者说如果我们将代码编写入一个文件中，此时就会出现文件大小很大，并且也会导致作用域的问题，代码不好维护。

浏览器对新技术的支持度不够

比如说我们编写一些比较高级的语法，但是部分浏览器是不支持的，此时我们就需要设置一些pollfill去解决该问题。在例如我们编写的TS和Vue文件，这些浏览器都不能识别，而webpack就会使用对应的babel对其进行转化，转化为浏览器可以识别的文件。

webpack的安装

wepack为了正常运行必须依赖node环境，而node环境为了可以正常的执行，必须使用npm工具管理node中各种依赖的包

因此安装webpack首先要安装Node.js，Node.js自带了软件包管理工具npm

全局安装webpack（npm install webpack -g）

局部安装webpck（npm install webpack --save-dev）

–save-dev是开发依赖，因为项目打包后webpack不需要继续使用。

另外一种是生产依赖，例如axios，vuex,router等在用户使用端需要继续使用的

一般情况下都是使用局部安装，因为不同的项目使用的webpack版本可能不一样，全局直接打包可能会兼容性出错，因此一般会单独对项目安装专属的webpack

示例

1.创建两个js文件

fomat.js

const model=function(){
    return "来自format"
}
//commonjs的导出
module.exports ={
 model   
}

math.js

export function sun(){
    return "来自math"
}
//es module导出

2.引入到index.js中

import { sun } from "./js/math";
const {model}=require("./js/format")

console.log(sun())
console.log(model())

3.引入到html文件并且在网页运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     
    <script src="./src/index.js" >
    </script>
  
</body>
</html>

4.结果

多个js文件引入，浏览器无法直接运行

webpack使用

1，初始化依赖包环境，创建package.json

package.json简介

什么是Node.js的模块（Module）？

在Node.js中，模块是一个库或框架，也是一个Node.js项目。Node.js项目遵循模块化的架构，当我们创建了一个Node.js项目，意味着创建了一个模块，这个模块的描述文件，被称为package.json。

通常情况下如果 package.json内容出错，会导致项目出现bug，甚至阻止项目的运行。

因此要使用webpack我们在项目中必须要有package.json文件

所以在修改该文件时候一定要小心，格式，名称等是否正确

package.json属性说明

name - 包名.

version - 包的版本号。

description - 包的描述。

homepage - 包的官网URL。

author - 包的作者，它的值是你在npm | Home网站的有效账户名，遵循“账户名<邮件>”的规则，例如：zhangsan zhangsan@163.com。

contributors - 包的其他贡献者。

dependencies / devDependencies - 生产/开发环境依赖包列表。它们将会被安装在 node_module 目录下。

repository - 包代码的Repo信息，包括type和URL，type可以是git或svn，URL则是包的Repo地址。

main - main 字段指定了程序的主入口文件，require(‘moduleName’) 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。

keywords - 关键字

npm init -y

、

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2，在项目中安装webpack

npm install webpack webpack-cli--save-dev
//简写
npm install webpack webpack-cli -D

package-lock.json

package-lock.json文件是在运行npm install命令时生成的。当你执行npm install时，npm会根据package.json文件中的依赖列表来安装相应的包，并生成一个package-lock.json文件。这个文件记录了安装过程中所使用的精确版本号信息，包括直接依赖和间接依赖。它的作用是为了确保项目在不同的环境下生成相同的node_modules目录，以保证项目的环境依赖一致。所以，在项目移动或共享时，需要同时复制package.json和package-lock.json两个文件，以保持环境的一致性。

什么是node_modules？

node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。在node.js中模块与文件是一一对应的，也就是说一个node.js文件就是一个模块。文件内容可能是我们封装好的一些JavaScript方法、json数据、编译过的C/C++拓展等，在关于node.js的误会提到过node.js的架构。其中http、fs、net等都是node.js提供的核心模块，使用C/C++实现，外部用JavaScript封装。require搜索module方式。

node_modules文件夹不需要上传，存在依赖文件package.json，则使用命令：npm install 可下载所需要的所有模块，自动生成node_modules文件夹

3，在package.json中修改script脚本

{
  "name": "workspace",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
      "build": "webpack"
    
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

4，运行打包命令

npm run build
//如果script中设置的是“serve”：“webpack”则为npm run serve

此时会有一个警告，暂时先不用管他

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

默认会打包src下的index.js

5，修改html引入的script

<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  </head>
  <body>

  //<script src="./src/index.js" type="module"> 
  //此时的dist是已经打包好的js引入文件
  <script src="./dist/main.js"></script>


  </body>
  </html>

webpack的配置

webpack-入口和出口

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

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

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

1.新建src并列处, webpack.config.js(默认)

2.填入配置项

const path=require("path")
//webpack在node.js环境运行，因此要使用commonjs模块方法
module.exports={
    entry:"./src/index.js",// 入口
    output:{
        path:path.resolve(__dirname,"./build"),// 出口路径
        filename:"bundle.js" // 出口文件名
    }
}

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

"scripts": {
    "build": "webpack"
},

此时运行npm run build,会根据配置文件的需求打包一个bundle.js

流程图：

StupidFrontEnd

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
webpack的使用与配置

现代 javascript 应用程序的静态模块打包器 (module bundler)把很多文件打包整合到一起, 缩小项目体积, 提高加载速度ES6/7/8 -> ES5 处理js兼容支持js模块化处理css兼容性html/css/js -> 压缩合并是安装node后用来存放用包管理工具下载安装的包的文件夹。比如这些工具。在node.js中模块与文件是一一对应的，也就是说一个node.js文件就是一个模块。
复制链接

扫一扫