您的位置: 首页  >  文章  >  Webpack学习记录(一)

Webpack学习记录(一)

分类: 文章 • 2024-02-28 08:57:52

1.什么是Webpack

WebPack可以看做是模块打包机，它可以分析你的结构目录，找到JS模块和浏览器不能直接运行的拓展语言（Sccs，TypeScript等），并将其打包为合适的格式供浏览器使用。
Webpack学习记录(一)
Webpack学习记录(一)
具体功能：
1.代码转换：TypeScript编译成JavaScript，Scss编译成css等。
2.文件优化：压缩TypeScript，CSS，HTML代码，压缩合并图像。
3.代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码让其异步执行。
4.模块合并：在采用模块化的项目里会有多个模块和文件，需要构建功能把模块分类合并成一个文件。
5.自动刷新：监听本地源代码的变化，自动重新构建，刷新浏览器。
6.代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。

构建体现了前端中的工程化和自动化思想，把一系列流程用代码去实现，让代码自动化地执行一系列复杂的流程。

2.WebPack的使用

首先初始化package.json来记录安装的包：npm init -y（这步也是快速初始化项目）
安装方式：

1.全局安装：cnpm install webpack -g
容易造成版本冲突，不建议使用这个方法。
2.本地安装：cnpm install webpack webpack-cli -D
在4.x之后的版本webpack打包命令需要靠webpack-cli提供该命令，-D表示只在线下环境下使用。

配置

如果是全局安装则cmd输入命令行webpack，如果是本地安装则命令行输入npx webpack。（没有配置的情况下默认生成为零配置）
如果不用零配置则在package.json同级目录下创建文件webpack.config.js（基于node，遵循commonjs规范）来规定相关属性。

let path = require('path'); //规定绝对路径时候需要引用到path
module.exports = {
	entry:'./src/index.js', //入口，表明从哪个开始打包，假设从index.js开始打包
	output:{
		filename:'build.js',//打包后生成js的文件名，不填则默认为main.js
		path: path.resolve('./build') //导出路径，不填则导出到dist文件夹中，如果没有自定义的这个文件夹则会自动创建。
	}, //出口
	devServer:{}, //开发服务器
	module:{}, //模块配置
	plugins:[], //插件的配置
	mode:'development', //只有两种模式选择，一种是development(开发),一种是production(生产)，不同模式下出口生成的js文件大小和浏览不一样。
	resolve:{},  //配置解析	
}

webpack-dev-server的使用

目的：为了实时更新代码的修改不用每次都webpack出新的main.js
webpack-dev-server是一个轻量级的服务器，修改文件源码后，自动刷新页面将修改同步到页面上
webpack-dev-server的安装：cmd上输入cnpm i webpack-dev-server -D
然后在webpack.json文件下设置快捷方式

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },

更改index.html中的<script src="/main.js"></script>,改成引用根目录下的main.js，（该main.js是储存在内存中的）
然后cmd中输入npm run dev出现下图
Webpack学习记录(一)
地址可以用来打开网页
第二行是说明输出来源是“/”，也就是根目录。
Webpack学习记录(一)
–open 是默认打开网址，后面加浏览器名字就是说明用什么浏览器打开
–hot 自动刷新页面，实现实时更新页面功能
–port 设置端口，这里例子设置为3000
–host 设置域名，这里例子设置为127.0.0.1
Webpack学习记录(一)

配置html-webpack-plugin插件

作用：实现将index.html放入内存中打开网址时将自动打开网页。
安装: cnpm i html-webpack-plugin -D
然后在配置文件中写入

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin') //导入在内存中自动生成index页面的插件

//创建一个实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template: path.join(__dirname, './src/index.html'),//要引用的源文件，__dirname表示当前文件所处的根目录
    filename: 'index.html' //生成内存中目标文件的名称（不一定要同名）
})

之后在插件配置中写入实例（不过不一定要写入该位置）
Webpack学习记录(一)
该插件能够自动打包main.js追加到页面上，因此index.html中可以不用自己引入main.js
Webpack学习记录(一)

相关推荐