配置文件展示
package.json
{
"name": "changerowcolor",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack serve",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.6.1"
},
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/plugin-proposal-decorators": "^7.14.5",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^5.2.6",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"less": "^4.1.1",
"less-loader": "^10.0.1",
"style-loader": "^3.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.42.1",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^3.11.2"
}
}
webpack.config.js
// 修改完配置要重启服务重启服务
// npm run dev 会读取这个文件然后再执行命令
// webpack4或者webpack5默认打包src下面的index.js文件
// 默认输出文件为dist文件夹下的main.js
// webpack-dev-serve回启动一个时时打包的http服务器浏览器访问http://localhost:8080,同时要在package.json配置 dev:webpack serve
// webpack-dev-serve会把代码放到内存上并不会放到物理磁盘上
const path = require('path')
// 导出html-webpack-plugin插件,得到的是一个构造函数
const htmlPlugin = require('html-webpack-plugin')
// 删除打包的文件再重新生成
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 创建一个实例对象
const pluginHtml = new htmlPlugin({
template: path.join(__dirname, 'src/myx.html'), //指定要存放的文件
filename: './index.html' //开发环境指定生成的文件,文件并没有在磁盘中,而是在内存中,通过webpack-dev-serve服务器,访问
})
module.exports = {
mode: 'development', //webpack运行模式 development 开发模式 production 生产模式
entry: path.join(__dirname, 'src/index1.js'), //通过entry指定打包入口文件
// 在开发调试阶段,建议大家都把 devtool 的值设置为 eval-source-map
// devtool: 'eval-source-map',
// 在实际发布的时候,建议大家把 devtool 的值设置为 nosources-source-map 或直接关闭 SourceMap自定位位置看不到源码
devtool: 'nosources-source-map',
// 指定生成的文件放在哪里以及名字
output: {
path: path.join(__dirname, '/dist'),
filename: 'js/bundle.js'
},
plugins: [pluginHtml, new CleanWebpackPlugin()], //通过plugins节点使插件生效,插件会自动注入打包好的js,修改完配置重启服务重启服务
devServer: {
// 首次打包成功后,自动打开浏览器
open: true,
// 在 http 协议中,如果端口号是 80,则可以被省略
port: 8890,
// 指定运行的主机地址
host: '127.0.0.1'
},
module: {
rules: [
// 从后往前调用
// 定义了不同模块对应的 loader
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
// 处理 .less 文件的 loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
// 处理图片文件的 loader
// 如果需要调用的 loader 只有一个,则只传递一个字符串也行,如果有多个loader,则必须指定数组
// 在配置 url-loader 的时候,多个参数之间,使用 & 符号进行分隔
//limit只有小于等于这个值才能被转成base64 outputPath指定图片生成的文件夹
{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' },
// 使用 babel-loader 处理高级的 JS 语法
// 在配置 babel-loader 的时候,程序员只需要把自己的代码进行转换即可;一定要排除 node_modules 目录中的 JS 文件
// 因为第三方包中的 JS 兼容性,不需要程序员关心 exclude排除
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
]
},
resolve: {
alias: {
// 告诉 webpack,程序员写的代码中,@ 符号表示 src 这一层目录
'@': path.join(__dirname, './src/')
}
}
}
babel.config.js
module.exports = {
plugins: [
// 声明 babel 可用的插件
// 将来,webpack 在调用 babel-loader 的时候,会先加载 plugins 插件来使用
['@babel/plugin-proposal-decorators', { legacy: true }]
]
}```
## 安装
1. 首先初始化npm
>npm init –y
> npm install webpack@5.42.1 webpack-cli@4.10.0 -D
2. 在项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件,并初始化如下的基本配置
```typescript
module.exports = {
mode: 'development', //webpack运行模式 development 开发模式 production 生产模式(会压缩代码)
}
```
3. 在 package.json 的 scripts 节点下,新增 dev 脚本如下
```typescript
"scripts": {
"dev": "webpack"
},
```
4. 终端运行
```typescript
npm run dev
```
**修改完配置要重启服务**
## 打包的入口与出口
在 webpack 4.x 和 5.x 的版本中,有如下的默认约定:
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js
可以通过修改配置实现入口与出口的约定
```typescript
module.exports = {
mode: 'development', //webpack运行模式 development 开发模式 production 生产模式(会压缩代码)
entry: path.join(__dirname, 'src/index1.js'), //通过entry指定打包入口文件
// 指定生成的文件放在哪里以及名字
output: {
path: path.join(__dirname, '/dist'),
filename: 'js/bundle.js'
},
}
webpack-dev-server
- webpack-dev-serve会启动一个时时打包的http服务器浏览器访问http://localhost:8080,同时要在package.json配置 dev:webpack serve
- webpack-dev-serve会把代码放到内存上并不会放到物理磁盘上
安装
npm install webpack-dev-server@3.11.2 -D
修改 package.json -> scripts 中的 dev 命令如下
"scripts": {
"dev": "webpack serve"
}
再次运行npm run dev,之后在浏览器中访问 http://localhost:8080 地址,查看自动打包效果
npm run dev
此时打包好的js文件是在http://localhost:8080跟目录下js文件夹中,所以要修改html引用路径 /js/bundle.js
html-webpack-plugin
当使用webpack-dev-server后我们访问服务器会出现直接访问到静态资源而不是index.html这就需要插件html-webpack-plugin处理路径
安装
npm install html-webpack-plugin@5.3.2 -D
调用 (在webpack.config.js中)
// 导出html-webpack-plugin插件,得到的是一个构造函数
const htmlPlugin = require('html-webpack-plugin')
// 创建一个实例对象
const pluginHtml = new htmlPlugin({
template: path.join(__dirname, 'src/myx.html'), //指定要存放的文件
filename: './index.html' //文件并没有在磁盘中,而是在内存中,通过webpack-dev-serve服务器,访问
})
module.exports = {
plugins: [pluginHtml, new CleanWebpackPlugin()], //通过plugins节点使插件生效,插件会自动注入打包好的js,修改完配置重启服务重启服务
}
注:插件会自动把打包好的文件注入到html,翻看源码会看到,不用手动去引入,包括最后打包发布的时候
devServer节点
配置主机地址,端口等信息,在webpack.config.js中
devServer: {
// 首次打包成功后,自动打开浏览器
open: true,
// 在 http 协议中,如果端口号是 80,则可以被省略
port: 8890,
// 指定运行的主机地址
host: '127.0.0.1'
},
loader
webpack只能处理普通js,当遇到其余文件或者高级的js则会出错,这时候需要用到loader
⚫ css-loader 可以打包处理 .css 相关的文件
⚫ less-loader 可以打包处理 .less 相关的文件
⚫ babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
注:当使用rules使用数组形式,规则是从后往前调用的
处理css
安装
npm i style-loader@3.0.0 css-loader@5.2.6 -D
在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下
module: {
rules: [
// 从后往前调用
// 定义了不同模块对应的 loader
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
},
处理less、
安装
npm i less-loader@10.0.1 less@4.1.1 -D
注:less只是一个依赖并不引入,引入的都是 [name]-loader这种带有后缀的
引入
module: {
rules: [
// 从后往前调用
// 定义了不同模块对应的 loader
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
// 处理 .less 文件的 loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
]
},
处理文件
主要是针对img这种会把img转为base64,好处是浏览器不用每次都通过url请求获取图片,但是当图片过大不建议用
module: {
rules: [
// 处理图片文件的 loader
// 如果需要调用的 loader 只有一个,则只传递一个字符串也行,如果有多个loader,则必须指定数组
// 在配置 url-loader 的时候,多个参数之间,使用 & 符号进行分隔
//limit只有小于等于这个值才能被转成base64 outputPath指定图片生成的文件夹
{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' }
]
},
处理高级语法
安装
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
使用babel需要创建一个babel的配置文件babel.config.js
在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
module: {
rules: [
// 使用 babel-loader 处理高级的 JS 语法
// 在配置 babel-loader 的时候,程序员只需要把自己的代码进行转换即可;一定要排除 node_modules 目录中的 JS 文件
// 因为第三方包中的 JS 兼容性,不需要程序员关心 exclude排除
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
]
},
注意事项:exclude要把node_modules文件夹排除,不然会把那里面的语法转换
babel.config.js 的配置文件
module.exports = {
plugins: [
// 声明 babel 可用的插件
// 将来,webpack 在调用 babel-loader 的时候,会先加载 plugins 插件来使用
['@babel/plugin-proposal-decorators', { legacy: true }]
]
}
配置路径字符
module.exports = {
resolve: {
alias: {
// 告诉 webpack,程序员写的代码中,@ 符号表示 src 这一层目录
'@': path.join(__dirname, './src/')
}
}
}
打包发布
在 package.json 文件的 scripts 节点下,新增 build 命令如下
"scripts": {
"build": "webpack --mode production"
},
注:mode会覆盖webpack配置中的mode
运行
npm run build
当dist有多余的文件需要删了时,因为每回打包都会自动生成dist,所以每回打包前删除dist,就行,为了防止忘删使用插件clean-webpack-plugin
安装或者教程可以参考npmjs上包的使用
安装
npm install --save-dev clean-webpack-plugin
导入
// 导入插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins: [new CleanWebpackPlugin()]
}
Source Map 调试查看问题
简介:使用webpack时候,由于是打包生成的文件,当出现bug时候,在控制台看到的错误信息是打包好的js,并不是项目中的,所以它对应的错误行以及点进去的js,都不是项目中的,所以可以有如下配置:
webpack.config.js
module.exports = {
// 在开发调试阶段,建议大家都把 devtool 的值设置为 eval-source-map
devtool: 'eval-source-map',
}
这样就可以在控制台看到具体错误,同时可以点进去,但是如果生产环境,别人同样也能看到,即源代码就被看到了,建议做如下配置:
module.exports = {
// 在实际发布的时候,建议大家把 devtool 的值设置为 nosources-source-map 或直接关闭 SourceMap自定位位置看不到源码
devtool: 'nosources-source-map',
}
这样只能看到行数,不能看到具体的js,即便是发布时候忘了修改配置也没事最好发布先删除。