webpack簡介 構建工具（基於Nodejs）node(v16)前端工程化。 環境搭建 創建一個空的package.json npm init webpack核心包（提供了API,插件） npm i webpack -g npm i webpack -D cnpm i webpack -g cnp ...
webpack簡介 構建工具（基於Nodejs）node(v16)前端工程化。 環境搭建 創建一個空的package.json
npm initwebpack核心包（提供了API,插件）
npm i webpack -g npm i webpack -D cnpm i webpack -g cnpm i webpack -Dwebpack命令行包（提供了很多命令）
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 -vwebpack是基於NodeJs環境的，webpack工作
-
- 官方推薦使用的配置文件:webpack.config.js
- 在項目根目錄創建src/main.js入口文件
//從Node中引入path模塊，path.resolve()/join() const file = require('path)const HtmlWebpackPlugin = require('html-webpack-plugin') const { ProgressPlugin} = require('webpack')
//本地服務配置 devServer:{ port:8088, open:true //項目啟動成功，自動打開瀏覽器 }
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
}，
new ProgressPlugin({ handler(percentage,message,...args){ if(percentage == 1){ console.log('100% 啟動成功') } } }),
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'),
}),
],註意：因為webpack有兩種工作模式，為了讓配置更加容易維護，所以我們分離環境。 在 webpack --env 指定環境，在配置文件 module.exports = function(env) 接收環境變數。 對 webpack配置進行拆分（公共配置、開發環境配置、打包配置），再使用 webpack-merge合併配置
module:{
//定義模塊編譯規則和方法
rules:[
//當webpack工作時，遇到.js結尾的文件時，就使用babel-loader進行載入，交給@babel/*進行編譯。得到es5代碼。
{test:/\.js$/,use:'babel-loader'}
]
}
}
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
