Weback使用详情

GDBY871

已于 2023-03-14 20:34:29 修改

阅读量335

点赞数

文章标签： javascript webpack 前端 Powered by 金山文档

于 2023-03-14 20:31:56 首次发布

本文链接：https://blog.csdn.net/weixin_62407339/article/details/129539426

版权

本文详细介绍了Webpack的五个核心概念：入口、输出、loader、插件和模式，并逐步指导如何初始化项目、安装所需包、创建配置文件以及处理不同类型的资源如CSS和图片。此外，还讨论了DevServer在自动编译和测试中的作用，以及打包优化策略，包括CSS和JS的提取以及性能优化。

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

webpack五个核心概念

入口(entry)：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

出口(output)：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。

loader:loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

插件(plugins):loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务

模式:通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

使用流程

1.初始化项目

初始化项目，生成package.json文件

npm init

使用 npm init 初始化一个项目，并安装webpack

2.安装 webpack 需要的包

 npm install --save-dev webpack-cli  webpack
 
 npm i webpack webpack-cli -g // 全局安装
 或
 npm i webpack webpack-cli -D //写入到package.json的开发依赖中

3.创建配置文件

webpack.config.js（不能改）

"webpack": "webpack --config webpack.config.js"

单入口

多入口

4.编译并测试

npm run webpack

打包样式资源（loader）

webpack无法处理样式资源，如果要处理，需要引入loader，写loader我们需要先写一下webpack的配置文件，配置一下webpack 作用就是指挥webpack怎么干活，干哪些活。

以打包css文件为例

我们这里用到了css-loader和style-loader两个包,所以需要下载这两个包

 npm i css‐loader style‐loader ‐D

在根目录下创建webpack.config.js

//resolve用来拼接绝对路径的方法
const {resolve} =require("path")
module.exports={
	//入口，指示webpack从哪个文件打包
 	entry:"./src/index.js",
 	output:{
        //打包好之后的文件名
 		filename:"bundle.js",
 		//__dirname是node的一个变量，代表当前文件的目录的绝对路径
 		path:resolve(__dirname,"dist")
	 },
 	//loader的配置
	 module:{
 		rules:[
 			{
 				//匹配哪些文件
 				test:/\.css$/,
                 //使用哪些loader进行处理
                 use:[
                     //创建一个标签，将js中的css样式资源插入进去，添加到页面中的head中生效
                     'style‐loader',
                     //将css文件以字符串的形式变成common.js的模块加载到js中，内容是样式字符串
                     'css‐loader'
                     //use数组中loader执行顺序，从右到左，从下到上，依次执行
                 ]
 			}

		]
 	},

插件(plugins)

先安装插件

npm i html‐webpack‐plugin ‐D

引入webpack插件

功能:默认会创建一个新的html文件，自动引入打包输出的所有资源(js/css)

webpack.config.js

const HtmlWebpackPlugin=require("html-webpack-plugin")
module.exports={
 	entry:,
 	output:{
	 },
	 module:{
 	},
    //plugins的配置
    plugins:[
		new HtmlWebpackPlugin({
            template'./src/index.html'
        })
     ],
}

运行打包 npx webpack

会发现多了一个html文件(默认打包只有一个js文件)

打包图片

下载两个loader

npm i url‐loader file‐loader ‐D
npm i html-loader -D

webpack.config.js

module:{
 		rules:[
 			{
 				test:/\.（jpg|png|gif)$/,
                //当只有一个loader的时候不需要use，可以直接写loader
                loader:"url-loader",
                options:{
                    //当发现图片小于8kb，就会被base64处理
                    limit:8*1024，
                    //关闭url-loader的es6模块化，使用commonjs解析，解决html-loader（使用的是common.js）解析问题
                    esModule:false,
                    //[hash:10]取图片的hash前十位
                    //[ext]取文件原来扩展名
                    name:"[hash:10].[ext]"
                }
 			}，{
 				test:/\.html$/,
            	//处理html文件的img图片（img打包之后文件名变了），负责引入img，从而能被url-loader处理
                loader:"html-loader",
 			}
		]
 	},

图片处理成base64

优点：减少请求数量（减轻服务器压力）

缺点：图片体积会更大（文件请求速度变慢）

DevServer（自动编译）

目前我们的每次修改都需要重新打包，不然总是显示之前的效果。此时我们需要创建一个服务器帮助我们解决这个问题

安装

npm i webpack‐dev‐server ‐D

webpack.config.js编写配置

plugins:[
],
//启动：webpack-dev-server
devServer:{
    //告诉服务器内容的来源。仅在需要提供静态文件时才进行配置
    contentBase:resolve(__dirname,"dist"),
    //启动gzip压缩
    compress:true,
    //端口号
    port:3000
}

开发服务器devServer，用来自动编译自动打开浏览器和刷新浏览器

特点：只会在内存中编译打包，不会有任何输出

打包优化

按文件格式分类好各个文件夹

css输出优化

css需要先提取文件

首先下载插件

npm i mini‐css‐extract‐plugin ‐D

修改配置webpack.config.js

const MiniCssExtractPlugin=require("mini‐css‐extract‐plugin");



module:{
 		rules:[
 			{
 				test:/\.css$/,
                 use:[
                     //提取js中的css成单独文件
                     MiniCssExtractPlugin.loader,
                     'css‐loader'
                 ]
 			}

		]
 	},
plugins:[
    new MiniCssExtractPlugin({
        //对输出的CSS文件放到指定目录并重命名
        filename:"css/build.css"
    })
],

js输出优化

直接在filename后面加上文件夹的名字重新打包即可

	entry:"./src/index.js",
 	output:{
        publicPath:"/",
 		filename:"js/bundle.js",
 		path:resolve(__dirname,"dist")
	 },

img输出优化

			{
 				test:/\.（jpg|png|gif)$/,
                loader:"url-loader",
                options:{
                    limit:8*1024，
                    esModule:false,
                    name:"[hash:10].[ext]",
                    //输出优化
                    outputPath:'img'
                }
 			}，