Webpack打包
webpack是什么
webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。下面是基于webpack5,对整个打包流程进行梳理。
一. webpack初体验
- 初始化 package.json
命令:npm init -y - 下载 webpack webpack-cli
如果想要到将其下载到当前项目中(版本独立),则加上 --save-dev
完整命令: npm i webpack webpack-cli --save -dev - 修改 package.json文件
在生成的 package.json文件中添加 “build”: “webpack” 就可以使用自定义命令打包,其中,build是自己取的名字
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
- 运行自定义命令打包观察效果
命令:npm run build
二. webpack开发环境 基本配置
2.1.创建配置文件
- 创建文件 webpack.config.js
- 在 entry 中可以配置入口文件路径,在 output 中配置输出的文件路径
const path = require('path');
// 导出配置对象,配置入口,出口文件路径
module.exports = {
// 入口
entry: path.resolve(__dirname, 'src/login/index.js'),
// 出口
output: {
path: path.resolve(__dirname, 'dist'),
filename: './login/index.js',
clean: true //生成打包后内容之前,清空输出目录
},
};
- 重新打包观察
运行命令 npm run build
2.2 打包 html 资源
- 下载 html-webpack-plugin 本地软件包
命令:npm i html-webpack-plugin --save-dev - 配置 webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry: path.resolve(__dirname, 'src/login/index.js'),
// 出口
output: {
path: path.resolve(__dirname, 'dist'),
filename: './login/index.js',
clean: true //生成打包后内容之前,清空输出目录
},
// 插件(给Webpack提供更多功能)
// plugins 的配置
// 功能:默认会创建一个空的 HTML,自动引入打包输出的所有资源(JS/CSS)
// 需求:需要有结构的 HTML 文件
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/login.html'), // 模版文件
filename: path.resolve(__dirname, 'dist/login/index.html') // 输出文件
})
]
};
- 重新打包观察
运行命令 npm run build
2.3 打包css代码
- 将准备的css代码引入到js中
// 准备 css 代码,并引入到 js 中
import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'
- 下载 css-loader 和 style-loader 本地软件包
命令:npm i css-loader style-loader -save-dev - 配置 webpack.config.js
module.exports = {
// 其他代码
......
// 加载器(让 webpack识别更多模块文件内容)
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
}
- 重新打包观察
运行命令 npm run build
优化-提取 css 代码到单独的 css 文件中
上述打包css代码的过程并没有将css代码打包成一个单独的文件,而是打包在了html文件中,提取css到单独的css文件的步骤:
- 下载 mini-css-extract-plugin 本地软件包
命令:npm i mini-css-extract-plugin --save-dev - 配置 webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
// 其他代码
......
// 插件(给Webpack提供更多功能)
plugins: [
// 其他代码
......
new MiniCssExtractPlugin() // 生成css文件
],
// 加载器(让 webpack识别更多模块文件内容)
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
}
- 重新打包观察
但是使用该插件压缩的css代码,并没有压缩我们自己写的css代码,只压缩了我们引用的css代码
优化-压缩 css 代码的步骤
- 下载 css-minimizer-webpack-plugin 本地软件包
命令:npm i css-minimizer-webpack-plugin --save-dev - 配置 webpack.config.js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = {
// 其他代码
......
// 插件(给Webpack提供更多功能)
plugins: [
// 其他代码
......
new MiniCssExtractPlugin() // 生成css文件
],
// 加载器(让 webpack识别更多模块文件内容)
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
// 优化
optimization: {
// 最小化
minimizer: [
// 在 webpack@5 中,你可以使用 `...` 语法来扩展现有的 minimizer(即 `terser-webpack-plugin`),将下一行取消注释(保证 js 代码还能压缩)
`...`,
new CssMinimizerPlugin(),
]
}
}
- 重新打包观察
2.4 打包lss代码
- 新建 less 文件并引入到js 中
// 新建 less 代码并引入到对应的js 中
import './index.less'
- 下载 less 和 less-loader 本地软件包
命令:npm i less less-loader --save-dev - 配置 webpack.config.js
// 加载器(让 webpack识别更多模块文件内容)
module: {
rules: [
{
test: /\.less$/i,
use: [
// compiles Less to CSS
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
],
},
],
},
- 重新打包观察
2.5 打包图片资源
webpack5 内置了资源模块(字体,图片等)打包,无需额外Loader,只需要简单配置即可处理图片资源。
- 创建 img 标签并动态添加到页面
// 注意:js 中引入本地图片资源要用 import 方式(如果是网络图片http地址,字符串可以直接写)
import imgObj from './assets/logo.png'
const theImg = document.createElement('img')
theImg.src = imgObj
document.querySelector('.login-wrap').appendChild(theImg)
- 配置 webpack.config.js
// 加载器(让 webpack识别更多模块文件内容)
module: {
rules: [
// 处理图片资源
{
test: /\.(png|jpg|jpeg|gif)$/i,
type: 'asset',
generator: {
filename: 'assets/[hash][ext][query]'
}
},
],
},
- 重新打包观察
三. 搭建开发环境
之前改代码,需要重新打包才能运行查看,效率很低。
可以配置webpack-dev-server快速开发应用程序,可以启动Web服务,自动检测代码变化,热更新到网页。
步骤
- 下载 webpack-dev-server 软件包到当前项目
命令:npm i webpack-dev-server --save-dev - 在 package.json 中配置自定义命令 dev
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack serve --open"
},
- 在 webpack.config.js 设置打包的模式为开发模式
module.exports = {
// 打包模式 (development 开发模式-使用相关内置优化)
mode:'development',
}
- 使用 npm run dev 启动开发服务器
注意1:webpack-dev-server 借助 http 模块创建 8080 默认 Web 服务
注意2:默认以 public 文件夹作为服务器根目录
注意3:webpack-dev-server 根据配置,打包相关代码在内存当中,以 output.path 的值作为服务器根目录(所以可以直接自己拼接访问 dist 目录下内容)