一、Webpack 简介
(一)定义
- webpack 是一个用于 JavaScript 应用程序的
静态模块打包工具
(二)核心概念
概念 | 解析 |
---|---|
入口 (entry) | 打包的入口文件,默认为./src/index.js |
输出 (output) | 打包的输出 bundle,默认值为./dist/main.js |
加载器 (loader) | 处理其他类型文件,并将其转换 为有效模块 |
插件 (plugin) | 打包优化,资源管理,注入环境变量 |
模式 (mode) | development ,production 或 none |
(三)核心配置
- 在
webpack.config.js
文件中配置
const {resolve} = require('path') // 拼接绝对路径
const HtmlWebpackPlugin = require('html-webpack-plugin');
module export = {
// 入口起点
entry:'./src/index.js',
// 输出
output:{
// 输出文件名
filename:'bulid.js',
// 输出路径
path:resolve(__dirname, 'bulid')
},
// loader 配置,不同类型文件必须配置不同的loader。下载 => 使用
module:{
rules:[{
// 1、匹配css文件
test: /\.css$/,
// 使用哪些loader进行处理
use:[
// use数组中loader执行顺序: 从右到左,从下到上 依次执行
// 创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载is中,里面内容是样式字符串
'css-loader'
]
},{
// 2、匹配less文件
test: /\.less$/,
// 使用哪些loader进行处理
use:[ // 多个使用use
'style-loader',
'css-loader',
// 将less文件解析为css文件
'less-loader'
]
},{
// 3、匹配图片资源
test: /\.(jpg|png|gif)$/,
// 使用哪些loader进行处理,下载url-loader和file-loader
loader:'url-loader', // 一个直接使用loader
options:{
// 图片小于8kb,就会被base64处理
// 优点: 减少请求数量(减轻服务器压力)
// 缺点: 图片体积会更大(文件请求速度更慢)
limit: 8 * 1024,
// 问题: url-loader默认使用es6模块化解析,html-loader引入图片是commonjs,解析时会出问题: [object Module]
// 解决: 关闭url-loader的es6模块化,使用commonjs解析
esModule: false,
// 给图片进行重命名 => [hash:n]取图片的hash的前n位 [ext]取文件原扩展名
name:'[hash:10].[ext]',
// 确定图片打包后存放在build中的文件位置
outputPath:'images'
}
},{
// 4、匹配html中img资源
test: /\.html$/,
// 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
loader: 'html-loader'
},{
// 5、匹配其他资源(除了html/js/css资源以外的资源)
// 排除css/js/html资源
exclude: /\.(css|js|html)$/,
loader:'file-loader'
}]
},
// plugin 配置,下载 => 引入 => 使用
plugins:[
new HtmlWebpackPlugin({ // 默认创建一个空的HTML,自动引入打包输出的所有资源 (JS/CSS)
// 复制 './src/index.html' 文件,并自动引入打包输出的所有资源(JS/CSS)
template: './src/index.html'
})
],
// mode 配置
mode:'development', // 'production'
// 开发服务器 devServer
// 特点: 开启自动化(自动编译,自动打开浏览器,自动刷新浏览器),只会在内存中编译打包,不会有任何输出
// 启动devServer指令: npx webpack-dev-serverdevServer
devServer:{
// 项目构建后路径
contentBase: resolve( __dirname, 'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true
}
}