webpack简介
构建工具（基于Nodejs）node(v16)前端工程化。
环境搭建
创建一个空的package.json
npm init |
webpack核心包（提供了API,插件）
npm i webpack -g npm i webpack -D cnpm i webpack -g cnpm i webpack -D
webpack命令行包（提供了很多命令）
npm i webpack-cli -g npm i webpack-cli -D cnpm i webpack-cli -g cnpm i webpack-cli -D
官方推荐的用于构建本地服务器的包
npm i webpack-dev-server -g npm i webpack-dev-server -D cnpm i webpack-dev-server -g cnpm i webpack-dev-server -D
判断webpack是否安装成功
webpack -v
webpack是基于NodeJs环境的，webpack工作
-
- 官方推荐使用的配置文件:webpack.config.js
- 在项目根目录创建src/main.js入口文件
webpack.config.js配置文件
//从Node中引入path模块，path.resolve()/join() const file = require('path)
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { ProgressPlugin} = require('webpack')
module.exports{
//指定webpack工作模式(两种模式：开发模式(development)，打包模式(production))
mode:'development',
//入口配置
//entry:'./src/main.js' //相对路径
//entry:path,resolve(__dirname,'src/main.js') //绝对路径
entry:{
app:file.resolve(__dirname,'src/main.js')
},
//出口配置
output:{
//指定打包结果的输出目录，默认是dist目录，只能使用绝对路径
path:path.resolve(__dirname,'dist')，
filename:'[name].[chunkhash:8].js'
//每次打包时，
clean:true
}，
//本地服务配置
devServer:{
port:8088,
open:true //项目启动成功，自动打开浏览器
}
plugins:[
new HtmlWebpackPlugin({
template:file.resolve(__dirname,'../','public/index.html'),
//把js脚本注入在body前
inject:'body',
//指定打包成功后模板的名字
filename:'index.html',
//指定index.html的标题
title:'沐沐',
//指定图标路径
favicon:file.resolve(__dirname,'../','public/index.html'),
}),
new ProgressPlugin({
handler(percentage,message,...args){
if(percentage == 1){
console.log('100% 启动成功')
}
}
}),
],
module:{
//定义模块编译规则和方法
rules:[
//当webpack工作时，遇到.js结尾的文件时，就使用babel-loader进行加载，交给@babel/*进行编译。得到es5代码。
{test:/\.js$/,use:'babel-loader'}
]
}
}
注意：因为webpack有两种工作模式，为了让配置更加容易维护，所以我们分离环境。
在 webpack --env 指定环境，在配置文件 module.exports = function(env) 接收环境变量。
对 webpack配置进行拆分（公共配置、开发环境配置、打包配置），再使用 webpack-merge合并配置
const { merge } = require('webpack-merge')
const config = require('./config/config') //公共配置
const serve = require('./config/serve') //开发环境配置
const build = require('./config/build') //打包配置
module.exports = function ( {development} ) {
return merge(config, development ? serve : build)
}
在webpack中，如何处理.js模块？
安装babel-loader,在公共配置中配置module
npm i babel-loader -D