第一次发博客，发现错误请及时纠正我
一、webpack的基本使用
1.安装webpack相关包
npm i webpack@5.5.1 webpack-cli@4.10.0, -D // -D 表示安装到开发环境
2.配置webpack
① 在项目根目录创建名为webpack.config.js的配置文件，并且初始化如下配置
module.exports={
mode:"development", // 构建模式 "production"
}
2.1mode可选
①delelopment
- 开发环境
- 不会对打包的文件进行代码压缩和性能优化
- 打包速度快，适合在开发阶段使用
②production
- 生产环境
- 会对打包生成的文件进行压缩和性能优化
- 打包速度慢，仅适合在发布阶段使用
2.2 webpack.config.js作用
在真正开始构建之前，会线读取这个文件，从而基于配置文件对项目进行打包
2.3 默认约定
默认打包入口文件为src->index.js
默认的文件输出路径为dist->main.js
2.4自定义打包出入口
// 操作路径的包
const path = require('path');
module.exports={
mode:"development", // 构建模式 "production"
entry: path.join(__dirname, './src/index.js'), // 入口文件
output: {
path: path.join(__dirname, './dist'), // 出口文件路径
filename: 'bundle.js' // 出口文件名
}
}
3.在package.json中的srcipt中新增一个dev脚本
"scripts": {
"dev": "webpack"
},
4.运行命令npm run dev生成dist目录
5.引入打包好的mian.js
<!-- 有兼容性问题 -->
<!-- <script src="./indes.js"></script> -->
<script src="../dist/main.js"></script>
6.devServer节点
- 设置知否自动打开浏览器
- 指定地址
- 指定端口
+devServer: {
+open: true, // 自动打开浏览器
+port: 80, // 端口号
+host: '127.0.0.1'
+}
二、webpack中常用的插件
webpack-dev-server和html-webpack-plugin
1.webpack-dev-server
npm i webpack-dev-server@3.11.0 -D
- 当检查到源码发生变化，则会自动进行项目的打包和构建
配置webpack-dev-server
"scripts": {
"dev": "webpack serve" // 添加serve，会启动一个http服务器http://localhost:8080
},
之后每次按ctrl+s都会制动打包，打包的文件会放在电脑内存里面，路径为(http://localhost:8080/bundle.js)资源管理器中不可见
<!-- 有兼容性问题 -->
<!-- <script src="./indes.js"></script> -->
<!-- 手动打包js引入 -->
<!-- <script src="../dist/bundle.js"></script> -->
<!-- 自动打包js引入 -->
<script src="http://localhost:8080/bundle.js"></script>
2.html-webpack-plugin
npm i html-webpack-plugin@5.5.0 -D
- webpack中的html插件，类似于一个模板引擎
- 可以通过此插件定制index.html中的内容
解决根目录显示
配置插件html-webpack-plugin
在webpack.config.js中添加如下代码
+const HtmlPlugin = require('html-webpack-plugin');
+const htmlPlugin = new HtmlPlugin({
+template: './src/index.html',// 原文件存放路径
+filename: './index.html'// 指定生成的文件存放路径
+})
module.exports={
mode:"development", // 构建模式 "production"
entry: path.join(__dirname, './src/index.js'), // 入口文件
output: {
path: path.join(__dirname, './dist'), // 出口文件路径
filename: 'bundle.js' // 出口文件名
},
+plugins: [htmlPlugin],
}
会自动注入，但是生成的页面也是在内存中，资源管理器看不到
<script src="bundle.js"></script> <!-- // 无需手动添加 -->
三、loader配置
协助webpack打包处理一些特定的文件模块
- css-loader可以打包.css的相关文件
- less-loader可以打包.less的相关文件
- babel-loader可以打包webpack无法处理的高级JS语法
1.处理css文件
安装loader
npm i style-loader@2.0.0 css-loader@5.0.1 -D
webpack.config.js配置文件中
module: { // 放左右第三方模块的匹配规则
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']}, // ['style-loader', 'css-loader']顺序不能乱，从后往前识别
]
}
在index.js中引入
import "./css/index.css";
2.处理less文件
安装loader
npm i less-loader@7.1.0 less@3.12.2 -D
webpack.config.js配置文件中
module: {
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']},
{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
]
}
在index.js中引入
import "./css/index.less";
3.处理url路径相关文件
安装loader
npm i url-loader@4.1.1 file-loader@6.2.0 -D
webpack.config.js配置文件中
module: {
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']}, // 处理css
{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, // 处理less
{test: /\.png|jpg|gif$/, use:'url-loader?limit=22229'}, // 处理url limit=22229表示小于22229kb的图片转为base64
]
}
#box{
width: 60px;
height: 30px;
background-color: aquamarine;
background: url("../image/22.png");
}
4.loader的另一种配置方式
module: {
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']}, // 处理css
{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, // 处理less
// {test: /\.png|jpg|gif$/, use:'url-loader?limit=1351'}, // 处理url limit=1351表示小于1351kb的图片转为base64
{
test: /\.png|jpg|gif$/,
use: {
loader: 'url-loader',
options: {
limit: 1351,
}
}},
]
}
5.处理js高级语法
webpack只能打包处理一部分高级的JavaScript语法，对于哪些不能处理的JavaScript语法需要借助babel-loader进行打包处理，例如webpack不能处理一下语法
class Person{
static info = 'person info'
}
console.log(Person.info)
安装loader（低版本webpack需要，新版不需要）
npm i babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-class-properties@7.12.1 -D
在webpack.config.js的module->rules数组中，添加
{
test: /\.js$/,
exclude: /node_modules/, // 排除模块
use: {
loader: 'babel-loader',
options: {
plugins: ['@babel/plugin-proposal-class-properties']
}
}
}
四、打包发布
build命令
–mode production会覆盖webpack.config.js的mode
"scripts": {
"dev": "webpack serve",
"build": "webpack --mode production"
},
打包之后
文件类型归类 配置
//js
output: {
path: path.join(__dirname, './dist'), // 出口文件路径
filename: 'js/bundle.js' // 出口文件名
}
// 图片
{
test: /\.png|jpg|gif$/,
use: {
loader: 'url-loader',
options: {
limit: 1349,
// outputPath: 'image',
//哈希截取，让图片的名字变短
name: 'img/[name].[hash:6].[ext]'
}
}},
自动清理dist目录
插件clean-webpack-plugin
安装
npm i clean-webpack-plugin@3.0.0 -D
配置
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const cleanPlugin = new CleanWebpackPlugin();
module.exports={
plugins: [htmlPlugin,cleanPlugin],
}
企业级项目的打包发布
- 生成打包报告，根据报告分析具体的优化方案
- Tree-Shaking
- 为第三方库启用CDN加载
- 配置组件的按需加载
- 开启路由懒加载
- 自定制首页内容
Source Map
生产环境的问题
- 变量被替换
- 空行和注释被剔除
Source Map 就是一个信息文件，里面存储的是位置信息，也就是对应了代码压缩混淆前后的对应关系。有了它。出错的时候，除错工具直接显示原始代码，而不是转换之后的代码。
解决Source Map的问题
解决保存行数保持一致，仅限开发模式
module.exports={
mode:"development",
devtool: 'eval-source-map', // 开发模式下的配置, 保证错误代码提示行数真确
}
生产环境下的Source Map
生产环境下为了安全，不会生成Source Map文件，防止源代码暴露给有图之人。nosource-source-map只会定位问题行，不会暴露源码
module.exports={
mode:"production",
devtool: 'nosource-source-map',
}
定位错误同时暴露源码
module.exports={
mode:"production",
devtool: 'source-map',
}
五、完整配置
package.json
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack serve",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.6.0"
},
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"babel-loader": "^8.2.1",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.2",
"less": "^3.12.2",
"less-loader": "^7.1.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.5.1",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^3.11.0"
}
}
webpack.config.js
// 操作路径的包
const path = require('path');
// 解决根目录显示
const HtmlPlugin = require('html-webpack-plugin');
// 自动清理dist目录
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// 实例化一个插件
const htmlPlugin = new HtmlPlugin({
template: './src/index.html',
filename: './index.html'
})
// 实例化一个插件
const cleanPlugin = new CleanWebpackPlugin();
module.exports={
mode:"development", // 构建模式 "production"
entry: path.join(__dirname, './src/index.js'), // 入口文件
output: {
path: path.join(__dirname, './dist'), // 出口文件路径
filename: 'js/bundle.js' // 出口文件名
},
plugins: [htmlPlugin,cleanPlugin],
devServer: {
open: true, // 自动打开浏览器
port: 80, // 端口号
host: '127.0.0.1'
},
devtool: 'eval-source-map', // 开发模式下的配置, 保证错误代码提示行数真确
module: {
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']}, // 处理css
{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, // 处理less
// {test: /\.png|jpg|gif$/, use:'url-loader?limit=1351'}, // 处理url limit=1351表示小于1351kb的图片转为base64
{
test: /\.png|jpg|gif$/,
use: {
loader: 'url-loader',
options: {
limit: 1349,
outputPath: 'image',
//哈希截取，让图片的名字变短
// name: 'img/[name].[hash:6].[ext]'
}
}},
{
test: /\.js$/,
exclude: /node_modules/, // 排除模块
use: {
loader: 'babel-loader',
options: {
plugins: ['@babel/plugin-proposal-class-properties'],
}
}
}
]
}
}
扫一扫
1320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
