【记】webpack手动搭建项目
使用webpack管理项目
- 新建项目文件夹，使用
npm init -y创建package.json文件 - 在项目中安装
webpack
npm install webpack webpack-cli -D
- 在项目中配置
webpack
// 根目录下新建 webpack.config.js
module.exports = {
// 运行模式，可选值 development(开发模式)和production(生产模式)
"mode": "development"
}
/*
1. development
- 开发环境
- 不会对打包生成的文件进行代码压缩和性能优化
- 打包速度快，适合在开发阶段使用
2. production
- 生成环境
- 会对打包生成的文件进行代码压缩和性能优化
- 打包速度慢，仅适合在项目发布阶段使用
*/
- 在
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的能力
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
}
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/")
}
}
}
