本文详细解析Webpack自动化打包流程，涵盖开发服务器devServer配置、热更新启动命令，以及通过分离配置文件实现开发与生产环境的多模式管理。内容包含具体的配置文件结构、npm脚本优化及内存限制设置，帮助开发者提升构建效率。
Webpack自动化打包
首先下载相关依赖包
npm i webpack-dev-server -D进行基础配置
webpack.config.js
const path = require('path')//nodejs核心模块，专门用来处理路径问题
const ESLintPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//入口
entry: './src/main.js',//相对路径
//出口
output: {
//__dirname nodejs变量，代表当前文件夹目录，当前文件侠士config.js 目录就是最外层的demo
path: path.resolve(__dirname, 'dist'),//绝对路径
//文件名
filename: './static/index.js',
clean: true
},
//加载器
module: {
//规则
// loader的配置
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: 'asset',//设置资源
generator: {
filename: "static/[hash][ext][query]",//打包文件名
},
parser: {
dataUrlCondition: {
// 小于10kb会转换base64，优点减少请求数量，缺点体积变大
maxSize: 10 * 1024
}
}
},
{
test: /\.js$/,
exclude: /node_modules/,//排除node_modules不处理
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
//插件
plugins: [
new ESLintPlugin({
context: path.resolve(__dirname, "src")
}),
new HtmlWebpackPlugin({
//模板，以public/index.html文件创建新的html文件
//心得html结构跟原来一样并且自动引入打包输出的资源
template:path.resolve(__dirname,"public/index.html")
})],
// 开发服务器
devServer:{
host:"localhost",//启动服务器域名
port:'3000',//端口号
open:true,//是否自动打开浏览器
},
//模式
mode: "development"
}
核心在于配置devServer模块，这相当于实现了热启动功能。此时的启动命令变为
npx webpack server，这是实时监听并启动的命令，区别于之前使用的npx webpack打包命令。
重点在于区分生产模式与开发模式的配置差异
首先在最外层创建config文件夹，并在其中放置两套独立的配置文件：webpack.dev.js用于开发环境配置，webpack.prod.js用于生产环境配置。
需要注意以下几个关键点
开发模式配置
入口是绝对路径不需要修改，其余路径都是相对路径需要回退到根目录下因为开发模式是不执行打包的所以输出路径可以填undefined，包括下面的clean也可以不填生产模式配置
入口是绝对路径不需要修改，其余路径都是相对路径需要回退到根目录下生产模式是不需要内置浏览器启动的，也是可以注释的，模式记得改为production
开发
生产
然后命令太长这时候我们可以修改node启动命令
"scripts": {
"start":"npm run dev",
"dev":"webpack serve --config ./config/webpack.dev.js",
"build":"webpack --config ./config/webpack.prod.js"
},公司启动命令有兴趣的朋友可以了解下，大概意思就是做了一个最大内存的限制防止文件过大打包出现问题
最后指令生成这个东西理解不是很深 ，有大佬了解也可以评论区讨论
到此这篇关于webpack自动化打包的文章就介绍到这了,更多相关webpack自动化打包内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！