webpack 是一款静态模块的打包工具
webpack 概念:作用: 分析、转义、压缩、打包代码
使用流程:1.初始化工程:yarn init -y (工程名不能是中文、大写、空格)
2.装包:1.webpack 2.webpack-cli
3.配置自定义脚本 在package.json里面添加 "script":{"build:'webpack"}
4.写默认的入口文件 创建src/index.js
5.打包 运行使用yarn build (npm run build)
6.输出 dist/main.js
基本配置
1.入口/出口 配置文件:webpack.config.js 导出一个配置对象
入口:entry 可以是相对路径
出口:output 这里必须是绝对路径
2.插件 html-webpack-plugin 作用 : 自动复制HTML文件到出口
用法: 1.装包
2.导入到webpack.config.js 在里面写
const HtmlWebpackPlugin require('html-webpack-plugin')
3.在plugins属性上配置下面代码:
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
3.loader
(1)打包css css-loader :解析css文件
style-loader : 将css-loader解析的内容插入到DOM中
用法: 1.装包
2.在module属性上配置如下:
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
}
]
}
(2)打包less less-loader :解析less文件
less less-loader的内部依赖,把less转化成css
用法: 在module属性上配置如下
module: {
rules: [
{
test: /\.less$/i,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
(3)打包图片 不用额外的包 ,内置的资源模块asset module
用法: 在moudle属性上配置如下
module: {
rules: [
{
test: /\.(png|gif|jpg|jpeg|bmp)$/i,
type: 'asset'
}
]
}
(4)打包字体 不需要额外包,内置模块asset module
用法: 在module 属性上配置如下
module: {
rules: [
{
test: /\.(eot|woff|woff2|svg|ttf)$/i,
type: 'asset/resource',
generator: {
filename: '[name].[hash:4][ext]'
}
}
]
}
(5)js降级 bable-loader 解析js文件 把高版本的js打包成低版本的。
@bable/core 核心包,bable转义工具
@bable/presets-env 语法设置
用法 在module属性上配置 如下
module: {
rules: [
{ // 强烈不建议大家手写, 容易出错
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
}
]
开发服务器
作用 : 在内存中开启一个服务器,每次更新打包时,不会输出到硬盘,只会在内存中更新, 大大缩短了打包时间。
用法 : 1.装包 webpack-dev-server
2.配置自定义脚本 package.json
"scripts": {
"build": "webpack",
"serve": "webpack serve"
}
3. 运用脚本 yarn serve
4.配置 mode production 1.线上环境打包时使用 2.效率低
devServer port 端口号
open 自动打开浏览器