依赖管理-Webpack🔖

进度:105

:::info 🌟
html中通常会引入过多静态资源，并且这些资源都有很多错综复杂的依赖关系。
为了解决这一问题，使用webpack进行管理。 :::

webpack是一个前端的构建工具，它是基于node.js开发出来的一个前端工具。

安装方式

全局安装：

npm i webpack -g

项目安装：在项目根目录中运行，安装到项目依赖中

npm i webpack --save-dev

一个项目的结构

1. dist：项目发布之后的文件在dist中，需要的时候拷贝dist即可
2. src：源代码文件夹
   1. css文件夹：放置css文件
   2. images文件夹：放置所有引用的images文件
   3. js文件夹：放置所有的js文件
   4. index.html：初始页面，这里只需要引用一次main.js即可
   5. main.js：在这里写所有需要的资源

main.js如何引用资源

import './css/index.css'

import $ from 'jquery'
//因为main.js不能直接被识别，所以需要使用webpack进行一下转化
//终端内运行 webpack 要打包的文件的路径 打包好的输出文件的路径
//示例 webpack ./src/main.js  ./dist/bundle.js
//然后需要在index.html中引用转换后的bundle.js文件

wepack-dev-server

一个插件，使用npm进行安装，可以自己配置后，保存html文件就自动进行webpack编译。

在项目根目录中运行 npm i wepack-dev-server 
//只能在项目中安装，不能全局安装
//需要在根目录建一个文件 webpack.config.js 在文件内配置自动打包

loader加载器

一个加载器，webpack只能处理js类型的文件，所以需要装一个loader加载器处理。

//安装loader加载器
cnpm i style-loader css-loader -D
//在webpack.config.js配置文件里面新增一个配置节点module，它是一个对象，该对象有一个rules属性，rules属性为数组
//示例
module:{
    rules:[
    {test:/\.css$/,use:['style-loader','css-loader']}
]
}
//默认情况下，webpack无法处理css文件中的url地址
//所以需要安装loader加载器
cnpm i url-loader file-loader