webpack
真的好累啊
什么是webpack
webpack是一个现代javascript应用的静态模块打包工具，其主要功能就是模块和打包
这里我一直觉得和maven很像，早在之前的学习过程中，maven具体的工作是什么我一直百思不得其解，认为我们普通的java程序就能够很好的跑起来为什么还要maven呢？
这里先说webpack，
模块化前端：
（这里我插一句嘴，这里的模块可以看作java中的类，但是不一样，不一样，不一样。块内的数据是私有的只是暴露一些接口与外部的其他模块进行通信）
早在之前模块化的概念就被提出并且执行，不过那个时候模块化开发必须借助其他工具，并且在完成代码的编写之后，还需要处理模块之间的各种依赖关系，（这里我必须插一嘴什么是依赖，标识这个项目需要依靠其他的组件库或者组件才能够运行，在java的开发中，通常使用maven或gradle构建工具来管理依赖，前端的工具也有很多这里我只学习webpack，之后的话还会考虑学习最近很火的vite。）并且将其进行整合打包。在webpack中不仅仅javascript可以被当作模块来使用，基本的图片，css，json文件等等都在webpack中都可以被当作模板来使用，这就是webpack中模块化的概念。
打包：
将webpack中的各种资源进行打包，并且打包的过程中进行资源的处理，比如将scss转换成css，将ES6转换成ES5，等等，（这里我再次插一句嘴，这里的包的概念，不是java中的package，这里的打包是bundle，是一个十分抽象的概念，把多个文件整合成一个文件的过程就是打包，举个例子，在之前我们都知道可以使用script标签来进行插入javascript代码，这个时候的javascript必须要依靠浏览器和html才能够运行的起来，如果没有html那就没有用，直到node的出现才能够，让javascript在终端运行，这个时候我们就能够像后端一样，将这些代码用import，export，require连接起来，但是在网页中这些连接的方法不能够使用，这个时候webpack的作用就来了，将代码打包处理文件之间的关系，让import等能够在html中使用，没讲清楚但是我能理解：-p）
webpack打包数据的流程
-
读取webpack的配置参数，
-
启动webpack，创建compiler对象并且开始解析项目，
-
从入口文件开始解析，并且导入依赖模块，递归遍历分析，形成依赖树
-
对不同文件类型的依赖模块文件使用对应的loader进行编译，最终转换成javascript文件，
-
整个过程中webpack会通过发布订阅模式，像外抛出一些hooks，为webpack插件即可通过监听这些关键的事件节点，执行插件认为u进而达到干预输结果的目的。
再往深处将就离谱了，就是原理了，目前也没有必要知道，目前来说吧除了搭建node服务器和vue使用过webpack以外，其他的地方暂时还没有用到。
这里开始我的正文：
webpack的安装和基本使用
因为webpack是node.js写的，所以在项目开始的时候 npm install webpack webpack-cli --dev
这里我选择使用yarn add -D webpack webpack-cli安装webpack的依赖
（这里我再次插一句嘴，-D表示这个依赖是开发依赖，就是指在编写代码的过程中需要使用的依赖，如果不加-D那引入的就是生产依赖，表示这个依赖在我开发的时候要用，开发完成执行项目的时候也需要引用。）
使用的步骤：
-
初始化项目yarn init -y
-
安装依赖
-
在项目中创建src目录，然后编写代码（index.js）这是默认的文件，之后会学习如何让更改 注意*这里src下的文件是要给浏览器使用的使用的是ES规范而不是node规范，但是当离开src之后，外部的代码全部都是依赖于node的使用的是commonJS规范。
-
执行yarn webpack命令打包项目
这里要说明一下，webpack在打包我们的文件的时候，会遍历我们的代码，当我们的模块暴露了但是没有被index.js引用，那么在打包好的js文件之中就不会引用该模块，（当然这里有个前提需要我们在，webpack的webpack.config.js中需要配置一行代码：mode:"production"设置打包模式，设置为生产模式，同理还有development可以将模式设置为开发模式。）但是如果模块中写了函数和表达式，虽然没有暴露但是在引用的过程中webpack还是会将这些代码进行打包。
entery
在webpack.config.js文件中添加entey:" "，这行代码用来指定打包时候的主文件， 默认是./src/index.js,如果你要修改主文件则添加主文件的路径，但是这个我们这个作为习惯，之后尽量不要修改。
entry的值可以是一个字符串，也可以是一个数组，还可以是一个对象，当这个值是一个对象的时候，就不会再打包成一个dist.js文件，就会根据对象的属性名打包属性值的文件，生成对应属性名的多个打包好的文件。
这里举个例子：
module.exports = {
mode:"production",
// entery:".src/a.js,"
// entery:["./src/a.js","./src/b.js"],
// entery:{
// a:'./src/a.js',
// b:'./src/b.js'
// },
}
output
顾名思义上一个是入口，那么这个就是出口
output:{
path: path.resolve(__dirname,"hello"), //指定打包的目录这里必须使用绝对路径
filename:"main.js",//打包后后的文件名
clean:true,//自动清理打包目录
}
属性有很多，这里仅仅介绍一下，多了的得去自己学
loader
关键东西
webpack默认情况下只能处理js文件，举个例子如果想要处理css文件就需要引入cssloader。
以下以css为例子：
使用css-loader可以处理js中的样式
使用步骤：
-
安装：
yard add css-loader -D -
配置：
webpack.config.js
module:{
rules:[
{
test:/\.css$/i,
use:"css-loader"
}
]
}原理是直接将css转换成js代码，单一职责，意思是这玩意只负责将css打包，不负责将css生效
于是为了让css生效必须继续引入一个loader
module:{
rules:[
//css
{
test:/\.css$/i,
use:["style-loader","css-loader"]
},
//图片类型
{
test:/\.(png|svg|jpg|jpeg|gif)$/i,
type:'asses/resource'
}
]
}use的顺序很重要，因为loader是从后往前执行的，顺序不能乱，活该被vite取代
babel
一个工具可以将新的js代码转换成旧的js代码，提高代码的兼容性
1.
npm install -D babel-loader @babel/core @babel/preset-env webpack安装babel
2.webpack.config.js
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}3.再package.json配置浏览器
plugin
插件用来为webpack扩展功能
html-webpack-plugin
-
这个插件可以打包完成之后，自动生成html页面
-
使用步骤：
-
安装依赖
yarn add html-webpack-plugin -D
2.配置插件
plugin:{
new HTMLPlugin({
title:"Hello Webpack"，//更换生成html的title标签
template："./sec/index.html"//这里的html文件是一个模板，之后生成的html文件都是按照这个html为模板生成的。
})
}
开发服务器
每次写完代码之后都需要yarn webpack
一天天啥也别干了，就webpack得了
于是我们输入代码：yarn webpack --watch
但是这种方式访问的方式是以静态文件的方式访问的，但是我们希望在服务器上访问
安装：yarn add -D webpack-dev-server
将项目放到开发服务器
这时我就想到了vue自动产生的服务器
sourceMap
webpack.config.js
devtool:"inline-source-map"
开发工具使用sourcemap工具，这个东东能够让我们再浏览器的开发者工具中的源码处看到源码，直接修改源码对代码进行调试。
标签：文件,知识,js,webpack,打包,loader,部分,css From： https://www.cnblogs.com/laonianrenws/p/17596708.html