webpack

打包##使用webpack进行工程化开发

1．需要在本地先全局安装webpack工具 window+R

cmdnpm install webpack@4 -g

npm install webpack-cli@3 -g

删除 npm remove webpack -g

查看版本  webpack -v

2．在当前项目终端中安装webpack

--在当前项目里面初始化一个包的描述文件

npm init -y

--再安装webpack和webpack-cli

npm install webpack@4 -D

npm install webpack-cli@3 -D

loader

loader:加载器，用来识别各种文件。

webpack默认只能处理js文件和json文件，如果要处理其他文件的话，需要引入对应的加载器。

识别css文件要两个加载器分别是：

https://www.webpackjs.com/loaders/css-loader/

https://www.webpackjs.com/loaders/style-loader/

这两个加载器是处理样式文件的，style-loader与css-loader必须结合使用

这时候得安装：

首先安装

npm install [email protected] -D

npm install [email protected] -D

在终端可以一起安装：npm install [email protected] npm install [email protected]

plugins插件

plugins可以自动帮我们创建html文件

这需要安装npm install [email protected] -D

这个插件和loader不太一样

loader安装好直接使用

这个插件需要引入

第一步先安装好如图

然后引入plugins插件

也可以指定一个html文件，作为页面模板被创建。

先创建上图public文件夹

然后在插件中指定html文件夹作为模板

如下图：

这样的好处是不需要我们自己创建html文件

file-loader

处理图片格式的文件

先安装

npm install [email protected] -D

url-loader

也是用来处理图片的

他可以限制图片的大小

终端安装

npm install [email protected] -D

把图片打包给index.html里

大图片要整体打包过去，小图片没有必要整体导入

如果你的图片通过src引入，每张图片都要去发请求返回的，

小图片没有必要发请求，把小图片压缩成base64编码

没有必要把所有图片参与打包

有些小图片可以把图片文件本身转成base64编码，以后大图片发送请求，小图片嵌在标签里面就行了

这时候用下面图片的方法就不行了

需要换url-loader

url-loader可以限制图片的大小