webpack基本了解

最新推荐文章于 2023-10-22 12:07:40 发布

神的少女光芒万丈

最新推荐文章于 2023-10-22 12:07:40 发布

阅读量148

点赞数

分类专栏：笔记文章标签： node.js javascript vue.js

本文链接：https://blog.csdn.net/qq_45656036/article/details/120437469

版权

笔记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

本文介绍了webpack的基本概念，包括它是现代JS应用程序的静态模块打包工具，为何要学习它（因为常用脚手架如vuejs是基于webpack封装的）。文章详细讲解了webpack的四个核心部分：入口（项目依赖的起点，默认为src/index.js）、出口（生成文件的路径，默认为dist）、加载器（用于处理各种类型文件，如CSS、图片等）、插件（处理loader无法处理的任务）。还提到了mode模式（development和production）、代码拆分以及如何配置多入口多出口。最后，文章提供了实践步骤，指导读者如何配置和使用webpack。

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

1.什么是webpack
基于现代js应用程序的静态模块打包工具
2.为什么学习webpack
常用的vuejs脚手架这些工具都是通过webpack进行封装，并且提供了单独的配置文件
3.webpack核心
重要的就4个
入口：entry
webpack的入口是收集前端项目所有依赖的起点，实际上，他就是一个简单的js。
默认的入口就是src/index.js 也可以修改默认的入口，也可以有多个入口
出口：output
出口是指webpack生成js和静态文件的地方，为ebpack4开始默认输出文件是dist 也是可以配置的
loaders 加载器
loader 是第三方扩展，专门帮助webpack处理各种类型的文件，比如用于css图片 sass
loader的目标就是转化模块里面的文件，一旦文件作为模块导入，webpack就可以把他们作为依赖，在项目中使用
plugins 插件
与loaders的区别：lader处理文件
loader处理不了的plugins处理
mode 模式
webpack有两种模式：development和production主要区别在于生产模式自动压缩并且优化项目的js代码
code splitting 代码拆分
代码拆分是减少单个体积

webpack适用于单页面应用，好配置
创建一个文件夹然后初始化一下

npm init -y

然后安装webpack

npm i webpack webpack-cli webpack-dev-server --save-dev

安装 underscore 测试一下

 npm underscore

然后创建一个src文件夹
里面放个a.js 与index.js
a.js代码

function a(){
    console.log(123)
}

export default a;

index.js代码

// console.log(xiao.a)
import a from './a.js'
import _ from 'underscore'
// console.log(a)
// console.log(_)
a()

index.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>
   
</body>
<script src='./dist/main.js'></script>
<!-- <script src='./a.js'></script> -->

</html>

然后执行一下npm webpack 就会生成dist文件夹运行html文件也会有打印结果
gulp只是工作流，没办法处理模块化问题，需要引入webpack

修改打包出口：
创建一个webpack.config.js的文件

const path = require('path')
module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./build')
    },
    mode:'development'
}

这样就可以修改打包的出口为build

loader是第三方扩展可以帮助webpack处理不同类型的文件，比如常见的loader处理css样式文件
通过module对象插入rules 去编写loader的配置
处理css，需要至少安装两个loader
参考地址：https://rlwb.github.io/gitbook/webpack5.html?q=

在这里插入图片描述
配置多入口多出口