webpack打包工具深入浅出基础配置总结
程序员文章站
2024-01-01 11:08:52
概念本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。官网直通车基础配置模式 mode入口 entry出口 output插件 plugins (loader插件)loader插件处理csscss-loader 分析css关系,需要加载哪...
概念
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
基础配置
模式 mode
入口 entry
出口 output
插件 plugins (loader插件)
loader插件
-
处理css
css-loader
分析css关系,需要加载哪些css文件style-loader
把css插入到html>head标签里里面mini-css-extract-plugin
抽取css为单独文件optimize-css-assets-webpack-plugin
压缩cssless
处理less文件less-loader
加载less文件
配置实例:
//导入处理html插件
const htmlWebpackPlugin = require("html-webpack-plugin")
//压缩、抽取css为单独文件
const minCssExtractPlugin = require("mini-css-extract-plugin")
//压缩css
const optimizeCss = require("optimize-css-assets-webpack-plugin")
//导出配置文件
module.exports = {
//定义入口文件
entry:"./src/index.js",
//定义出口文件
output:{
//文件名
filename:"main.js",
//查询路径
path:__dirname+"/dist"
},
plugins:[
//创建一个html处理插件
new htmlWebpackPlugin({
//压缩
minify:true,
//标题
title:"我的第一个webpack",
//模板
template:__dirname+"/public/index.html"
}),
//抽取css 生成style.css文件
new minCssExtractPlugin({
filename:"style.css"
}),
],
optimization:{
//css、js压缩器
minimizer:[ new optimizeCss() , new UglifyjsWebpackPlugin],
},
module:{
//规则
//不同文件的处理插件不同
rules:[
{
test:/\.css$/,
//从右至左依次执行
use:["style-loader","css-loader"]
},
{
test:/\.less$/,
//从右至左依次执行
use:[minCssExtractPlugin.loader,"css-loader","less-loader"]
},
]
},
resolve:{
//别名
alias:{
"@":path.resolve(__dirname,"./src")
}
}
}
本文地址:https://blog.csdn.net/weixin_48179599/article/details/107522231