【记】webpack手动搭建项目

使用webpack管理项目

1. 新建项目文件夹，使用npm init -y创建 package.json文件
2. 在项目中安装webpack

npm install webpack webpack-cli -D

3. 在项目中配置webpack

// 根目录下新建 webpack.config.js
module.exports = {
	// 运行模式，可选值 development(开发模式)和production(生产模式)
	"mode": "development"
}
/*
1. development 
- 开发环境
- 不会对打包生成的文件进行代码压缩和性能优化
- 打包速度快，适合在开发阶段使用
2. production
- 生成环境
- 会对打包生成的文件进行代码压缩和性能优化 
- 打包速度慢，仅适合在项目发布阶段使用
*/

4. 在package.json文件中配置scripts

// package.json
// 可以通过 npm run dev 运行
"scripts": {
	"dev": "webpack"
}

配置webpack打包文件的入口和出口

// 导入 node.js 中操作路径的模块
const path = require("path")

module.exports = {
	// 到本入口文件的路径
	"entry": path.join(__dirname, "./src/index.js"),
	// 输出文件的存放路径
	"output": {
		"path": path.join(__dirname, "./dist"),
		// 输出文件的名称
		"filename": "main.js"
	}
}

配置webpack中的插件

通过安装和配置第三方插件，扩展webpack的能力

1. webpack-dev-server，当修改源代码，webpack会自动打包构建

# 安装
npm install webpack-dev-server -D
# 修改 package.json文件中scripts中的dev命令
"script": {
	"dev": "webpack serve"
}
# 运行过后可以通过 http://localhost:8080 浏览访问
# 在webpack.config.js配置文件中，通过devServer选项对插件进行更多的配置
"devServer": {
	// 初次打包完成后，自动打开浏览器
	"open": true,
	"host": "127.0.0.1",
	// 配置使用的端口
	"port": 3000
}

2. html-webpack-plugin 可以通过插件定制 index.html页面的内容

# 安装
npm install html-webpack-plugin -D
# 在webpack.config.js文件中进行配置
# 1. 导入并得到构造函数
const HtmlPlugin = require("html-webpack-plugin")

# 2. 创建 HTML 插件实例对象
const htmlPlugin = new HtmlPlugin({
	// 指定源文件的存放路径
	"template": "./src/index.html",
	// 指定生成的文件的存放路径
	"filename": "./index.html"
})
# 3. 将实例添加到配置选项中
module.export = {
	"mode": "development",
	"plugins": [htmlPlugin]
}

配置webpack中的loader

webpack 默认只能打包处理以.js为后缀的模块。非.js后缀结尾的模块，默认处理不了，需要调用loader加载器才能正常打包，否则报错。如：

• style-loader css-loader 可以打包处理.css相关文件
• less-loader可以打包处理.less相关文件
• babel-loader可以打包处理webpack无法处理的高级JavaScript语法

处理CSS文件：

// 安装loader依赖包
npm i style-loader css-loader -D 
// 在 webpack.config.js 文件中进行如下配置
// 所有第三方文件模块的匹配规则
"module": {
	// 文件后缀名的匹配规则
	"rules": [
		{ 
			// 表示匹配的文件类型
			"test": /\.css$/,
			// 表示对应要调用的loader
			// 数组中的loader顺序是固定的，调用顺序是 从后往前调用
			"use": ["style-loader", "css-loader"]
		}
	]
}

处理less文件：

// 安装loader依赖包
npm i less-loader less -D
// 在 webpack.config.js 文件中进行如下配置
// 所有第三方文件模块的匹配规则
"module": {
	// 文件后缀名的匹配规则
	"rules": [
		{ 
			// 表示匹配的文件类型
			"test": /\.css$/,
			// 表示对应要调用的loader
			// 数组中的loader顺序是固定的，调用顺序是 从后往前调用
			"use": ["style-loader", "css-loader", "less-loader"]
		}
	]
}

处理图片和文件：

// 安装
npm i url-loader file-loader -D
// 在 webpack.config.js 文件中进行如下配置
// 所有第三方文件模块的匹配规则
"module": {
	// 文件后缀名的匹配规则
	"rules": [
		{ 
			// 表示匹配的文件类型
			"test": /\.jpg|png|gif$/,
			// 表示对应要调用的loader
			// 数组中的loader顺序是固定的，调用顺序是 从后往前调用
			// limit 用来指定图片的带下，单位为字节，只有 小于等于 limit 大小的图片，才会被转化为 base64格式的图片
			// outputPath 为文件打包后存放的文件夹名称
			"use": "url-loader?limit=22229&outputPath=images"
		}
	]
}

处理JavaScript高级语法：

// 安装
npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D
// 在 webpage.config.js 进行配置
"module": {
	"rules": [
		{
			"test: /\.js/",
			"use": "babel-loader",
			// 指定排除项，node_modules 目录的第三方包不需要被打包
			"exclude": /node_modules/
		}
	]
}
// 在项目根目录下，创建 babel.config.js 的配置文件，定义 Babel 的配置项
module.exports = {
	"plugins": [
		["@babel/plugin-proposal-decorators", {
			legacy: true
		}]
	]
}

配置 webpack 的打包发布

"script": {
	"dev": "webpack serve",
	"build": "webpack --mode production"
}
// --model 是一个参数项，用来指定webpack的运行模式
// production 表示生成环境
// 通过 --model 指定的参数会覆盖webpack.config.js中的model选项

配置自动清理dist目录

每次打包发布时自动清理掉 dist 文件夹

// 安装
npm i clean-webpack-plugin -D
// 按需导入插件
const { ClearWebpackPlugin } = require("clean-webpack-plugin")
const clearPlugin = new ClearWebpackPlugin()
// 添加到 plugins 选项中
"plugins": [htmlPlugin, clearPlugin]

Source Map

Source Map就是一个信息文件，里面存储着位置信息。也就是说，Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置。方便出错时，快速定位。

module.exports = {
	"devtool": "eval-source-map",
	// 发布生产建议把值设为 nosources-source-map 或直接关闭 source-map
	"devtool": "source-map"
}

配置路径别名

// webpack.config.js
module.exports = {
	"resolve": {
		"alias": {
			"@": path.join(__dirname, "./src/")
		}
	}
}