Webpack(1. 基础认知)

最新推荐文章于 2024-07-16 14:43:25 发布

success_on

最新推荐文章于 2024-07-16 14:43:25 发布

阅读量175

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/a2690656046/article/details/117650159

版权

什么是webpack?

介绍
webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具

在这里插入图片描述

这是官方给出的回答,在我个人看来它就是个打包器.
可以从两个地方理解

1.用于现代 JavaScript 应用程序和模块
既然是用于JavaScript那么是不是可以理解成,在不进行特殊处理时,webpack能处理javascript,也只能处理javascript呢?
模块通常有两种:
第一种

commonjs规范：node应用是由模块组成的，每一个文件都是一个模块，拥有自己的变量、作用域和方法。每个模块内部都会包含一个对象module，这个对象的exports属性是对外的接口，每次加载这个模块都是加载这个属性中的内容，require方法用于加载某个模块。

第二种

ES6模块规范：ES6模块规范是我们现在常用的，它是通过import进行模块导入、通过export进行模块导出。ES6
在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD
规范，成为浏览器和服务器通用的模块解决方案

webpack的函数本质上就是执行一个模块的代码，然后将相应的导出变量挂载在module.exports对象上。这样就可以在其他模块通过

2.打包工具
什么是打包工具?打包工具能干嘛?
在我们需要将多个静态模块在同一模板上使用时,多个文件分开加载要比在一起一个文件加载要大得多,这时候我们就希望能将他们压缩成一个文件,这时就需要打包了

除此之外,webpack还有别的功能
翻译官功能,在打包的过程中可以加载一个loader,可以将代码转成浏览器能看懂的代码.
当我们想对文件做别的处理时可以使用plugin来处理.
loader和plugin都有可插拔的功能,即是想用是插上使用,反之则拔掉不使用.这个功能使得webpack变得非常灵活和轻量.
(注意:这两个功能在webpack.config.js文件中进行配置)

webpack的打包过程

具体的执行过程如下

从入口文件开始,分析整个文件的依赖树
将每个依赖模块包装起来,放到一个函数中等待调用
实现模块加载的方法,并将他放到模块执行环境中,确保模块间可以相互调用
把执行入口文件的逻辑放到一个函数表达式中,并立即执行

(注意:每次启动时都要初始化 npm init.)
这样打包之后的js文件，并不能被其他的文件引用，因为它只作用于当前作用域，这个js文件不能被其他模块通过import或者require的方式引用。

这是我个人的webpack的简单的项目图

可以在index.html中引入一个dist的文件这是src下的入口文件打包后输出的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./dist/bundle.js"></script>
</body>
</html>

在终端/控制台上用webpack,这样dist就会生成一个bundle.js的文件来接受你src下的入口文件的内容,这个被称为出口文件.
(注意:webpack直接打包适用于4.0版本的,低于的最好跟新到最新版本)
我们在想要直接使用webpack就可以打包到dist里的话,我们就需要配置一个文件,来设置它的入口和出口文件,这样我们直接使用webpack就可以直接打包文件了.
这个文件名我们取名为webpack.config.js,就当它是个绝对的名字.
(注意:这个名字可以更改,但是很麻烦,所以我们还是默认按照这个名字比较好)
我们需要在webpack.config.js文件里配置路径:

const path = require('path')
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    entry:'./app.js',
    output:{
        path: path.join(__dirname,'dist'),//绝对路径
        filename:'bundle.js'
    },
    // devServer:{
    //     port:3000,
    //     publicPath:'/dist'
    // },
    // module:{
    //     rules:[
    //         {
    //         test: /\.css$/,
    //         use:[
    //             'style-loader',
    //             'css-loader'
    //         ]
    //     }
    //     ]
    // },
    // plugins: [
    //     new UglifyJsPlugin()
    // ]
}

这样一来我们的路径就配置完毕,入口文件和出口文件都配置完成,我们就可以直接使用webpack来打包了,打包完成后自动到dist里的bundle.js文件中了.

我们这里用到的一些命令写在了下面

需要配置一系列的task,并且定义tack要处理的事务
之后让grunt.gulp来执行这些tack.而且让整个流程自动化
被称为前端自动化任务管理工具
webpack 更加强调模块化开发管理,而文件压缩合并,预处理等功能,是他附带的功能
webpack 为了可以正常运行,依赖node环境(安装)
webpack --entry ./src/main.js -o ./dist/bundie,js --mode=development打包命令
“license”: “ISC” 是否开源,开源的话需要这个东西
npm install 安装依赖
path.resolve()函数将路径拼接起来
__dirname, node获取当前文件里面的路径,绝对路径
entry 入口文件
output 出口文件
npm run build 打包
npm install webpack@5.38.1 --save-dev 本地安装
devDependencies 开发时依赖
“build”:“webpack” 优先使用本地webpack,输入npm run build 自动打包压缩
用局部webpack 需要引入webpack 的路径

总结:webpack本身的作用就是用来打包的,所有的功能都是围绕着如何更好的打包这一功能的.而这其中有一些简单的方法,如:

直接写链接的方式来打包代码,
有将代码的入口和出口的文件写出来,这样就可以直接输入webpack来打包
也有在package.json页面的scripts方法中添加一个来绑定路径的方式通过npm run 方法名的方式输出出来

以及webpack是怎么实现模块化的？

在webpack打包时，babel会将ES6模块转换成commonjs规范，但是我们前面不是说commonjs不能用在浏览器端吗？为什么这里可以？这是因为webpack自己实现了一个require函数，用来加载commonjs模块的内容，使得最后的打包代码可以在浏览器中使用.

还有热更新和插件等没有在本期细讲,那就期待下期再见吧

success_on

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack(1. 基础认知)

什么是webpack?webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具这是官方给出的回答,在我个人看来可以从两个地方理解1.用于现代 JavaScript 应用程序既然是用于JavaScript那么是不是可以理解成,在不进行特殊处理时,webpack能处理javascript,也只能处理javascript呢?2.静态模块打包工具什么是打包工具?打包工具能干嘛?在我们需要将多个静态模块在同一模板上使用时,多个文件分开加载要比在一起一个文件加载要大得多,这时候我
复制链接

扫一扫