webpack学习笔记I

最新推荐文章于 2024-11-09 00:03:49 发布

薄荷味的雪碧

最新推荐文章于 2024-11-09 00:03:49 发布

阅读量151

点赞数

分类专栏：前端文章标签： webpack nodejs vue react

本文链接：https://blog.csdn.net/mint_sprite/article/details/101256470

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言：由于我在项目中使用vue与react的时候对webpack的打包方式不太理解，以及近期对nodejs加深了认识，故想写一系列关于webpack的笔记，用来记录学习过程。

什么是webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
在这里插入图片描述
从这张图我们可以看出，webpack可以把模块化的js，css等样式文件依赖，转化成静态的文件依赖。

如何使用（初始化搭建yongwebpack项目结构）

(默认已经安装配置完成node的开发环境)

yarn 初始化

-> yarn init -y

在这里插入图片描述
首先，我们在本地新建一个webpack-demo目录，进入目录之后用yarn对这个目录初始化，生成package.json 文件。

安装依赖

-> yarn add webpack webpack-cli -D

在这里插入图片描述
这样我们的项目就可以用webpack进行管理了

创建目录，文件

->touch webpack.config.js
->mkdir src
->cd src
->touch index.js
->touch index.html

床架webpack.config.js
创建src文件夹
在src下创建 index.js index.html

撰写配置

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 模板 -->
</body>
</html>

webpack.config.js

const path = require('path');
module.export = {
	mode:'production',
	entry:'./src/index.js',
	output:{
		filename:'bundle.js',
		path:path.resolve('dist')
	}
}

以上配置的内容为

引入node中的path模块
声明webpack的模式为生产模式
入口文件位于相对路径的src下的index.js
打包输出文件名为bunble.js
打包生成的路径:这里一定要写绝对路径,所以我们使用node的path帮助我们定位在当前目录下的dist,获取其绝对路径
通过以上配置,在项目目录下运行 npx

可以看到打包成功

用node运行 bundle
在这里插入图片描述

将打包的js自动嵌入html

下载依赖

-> yarn add html-webpack-plugin -D

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.export = {
	mode:'production',
	entry:'./src/index.js',
	output:{
		filename:'bundle.js',
		path:path.resolve('dist')
	},
	plugins:[
		new HtmlWebpackPlugin({
			template:'./src/index.html',
			filename:'index.html',
			minify:{
				removeComments:true,
                removeAttributeQuotes:true,
			}
		}),
	]
}

再次运行打包
即可看到效果