1、安装
全局安装
npm install webpack webpack-cli --global
本地安装
# 初始化npm包管理配置文件
npm init -y
# 工作文件夹下安装webpack
npm install webpack webpack-cli --save-dev
2、基本使用
# webpack-cli终端指令查看
npx webpack --help
新建webpack.config.js
配置文件
const path = require('path')
module.exports = {
// 配置入口和出口文件
entry: './src/index.js',
output: {
filename: 'bundle.js',
// 这里要设置绝对路径
path: path.resolve(__dirname,'./dist'),
// 清除上一次的打包文件
clean: true
}
}
使用webpack --watch
打包能监视文件变化进行自动编译
3、配置项
mode
module.exports = {
// 编译模式
mode: 'development'
}
devtool
module.exports = {
devtool: 'inline-source-map'
}
4、插件
HtmlWebpackPlugin
作用
/* 打包后的文件需要手动引入,很是麻烦
该插件将为你生成一个 HTML5 文件, 在 body 中使用 `script` 标签引入你所有 webpack 生成的 bundle
*/
安装(开发环境)
npm install html-webpack-plugin -D
配置(webpack.config.js)
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
// 生成一个Html,也可以不配置,new HtmlWebpackPlugin()
new HtmlWebpackPlugin({
// 打包的模板html文件
template:'./index.html',
// 生成文件的名称
filename:'app.html',
// script标签的位置
inject:'body',
})
]
}
webpack-dev-server
作用
/* watch虽然能监测文件变化,但是仍然需要手动刷星浏览器
webpack-dev-server不仅能帮我们打包,还能帮我们开启服务器,同时自动更新
*/
安装
npm install webpack-dev-server -D
配置
module.exports = {
devServer: {
static: './dist'
}
}
mini-css-extract-plugin
作用
/*
- 将head标签中的css抽离出去,避免打包的文件过大
- 这个插件是webpack5环境的
*/
安装
npm install mini-css-extract-plugin -D
配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
plugins:[
// 使用插件,配置项可选,默认打包到dist根目录,名为main.css
new MiniCssExtractPlugin({
// 配置位置和文件名
filename:'style[contenthash].css'
})
],
module: {
rules: [
{
test: /\.(css|less)$/,
// 不再使用style-loader,而是插件中的loader
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
}
]
}
}
css-minimizer-webpack-plugin
作用
/*
- 这个插件用于优化和压缩 CSS
*/
安装
npm install css-minimizer-webpack-plugin -D
配置
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
module.exports = {
mode:'production',
optimization: {
minimizer: [
new CssMinimizerPlugin(),
],
}
}
regeneratorRuntime
此插件是webpack打包生成的全局辅助函数,由babel生成,用于兼容async和await的语法
安装
npm install @babel/runtime -D
# 安装这个插件会在需要regeneratorRuntime的地方自动导入包
npm install @babel/plugin-transform-runtime -D
module.exports = {
module:{
rules: [
{
test:'/\.js$/',
exclude:/node_modules/,
use: {
loader:'babel-loader',
options:{
presets:['@babel/preset-env'],
plugins: [
['@babel/plugin-transform-runtime']
]
}
}
}
]
}
}
5、资源模块
允许webpack打包其他类型的资源文件,有四种资源类型:
resource
asset/resource:发送一个单独的文件并导出url
module.exports = {
module: {
// 配置规则
rules: [
// 不同的对象加载不同类型的文件,这里是加载png图片
{
// 正则匹配
text: /\.png/,
type: 'asset/resource',
// 方法一:自定义文件打包后的文件夹位置和文件名(优先级高于方法二)
generator:{
filename:'images/[contenthash][ext]'
}
},
{
test:/\.(woff|woff2|eot|ttf|otf)/,
type: 'asset/resource'
}
]
},
// 方法二:在output中自定义资源打包后的文件夹
output:{
// 通过内容生成hash,扩展名不变,放入images文件中
assetModuleFilename:'images/[contenthash][ext]'
}
}
结果<img src="http://127.0.0.1:5500/dist/images/c5dcd15b9.png">
inline
asset/inline:导出资源的DataUrl
module.exports = {
module: {
rules: [
{
text: /\.png$/,
type: 'asset/inline'
}
]
}
}
结果:<img src="data:image/png;base64,...略">
source
asset/source:导出资源的源代码
/* 将资源文本直接导出 */
module.exports = {
module: {
// 配置规则
rules: [
{
text: /\.png$/,
type: 'asset'
}
]
}
}
asset
asset:会在导出资源的DataUrl和发送单独的文件之间自动进行选择
资源文件大于等于8K:使用asset/resource:打包成一个文件并导出url
资源小于8K,不会打包,使用base64地址
module.exports = {
module: {
rules: [
{
text: /\.png$/,
type: 'asset',
// 修改大小的临界值
parser:{
dataUrlCondition: {
maxSize:4*1024 (默认8k)
}
}
}
]
}
}
6、loader(*)
webpack默认只能打包处理 .js 后缀名结尾的模块,其他非.js后缀名结尾的模块,webpack默认处理不了,需要调用loader加载器才可以正常打包
css-loader
安装
# 处理css文件的loader
npm install css-loader -D
# 创建style标签放入index.html中
npm install style-loader -D
配置
module.exports = {
module: {
rules: [
{
test: /\.css$/,
// 先执行的loader后写,先处理css文件,再将样式放入index.html中
use: ['style-loader','css-loader']
}
]
}
}
less-loader
安装
# 在css-loader和style-loader的基础上多安装一个less-loader
npm install less-loader -D
配置
module.exports = {
module: {
rules: [
{
test: /\.(css|less)$/,
use: ['style-loader','css-loader','less-loader']
}
]
}
}
csv-loader | xml-loader
作用
/*
加载不同的数据:
- 使用csv-loader加载csv或者tsv数据
- 使用xml-loader加载xml数据
*/
安装
npm install csv-loader -D
npm install csv-loader -D
配置
module.exports = {
module: {
rules: [
{
test: /\.(csv|tsv)/,
use: 'csv-loader'
},
{
test: /\.xml/,
use: 'xml-loader'
}
]
}
}
toml | yaml | json5
作用:加载 toml | yaml | json5 数据
安装
npm install toml yaml json5 -D
配置
const toml = require('toml')
const yaml = require('yaml ')
const json5 = require('json5 ')
module.exports = {
module: {
rules: [
{
test: /\.toml$/,
use: 'json',
parser:{
parse: toml.parse
}
},
{
test: /\.yaml/,
use: 'json',
parser:{
parse: yaml.parse
}
},
{
test: /\.json5/,
use: 'json',
parser:{
parse: json5.parse
}
}
]
}
}
babel-loader(*)
可以打包处理webpack无法处理的高级JS语法
npm intall babel-loader @babel/core @babel/preset-env -D
module.exports = {
module:{
rules: [
{
test:'/\.js$/',
exclude:/node_modules/,
use: {
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
}
}
}
]
}
}
文章评论