Webpack基礎入門
優秀的打包工具，減少前端工作量，模塊化編程，彌補browser的原生的不足，參考webpack中文網；
安裝
- 基於node.js，安裝：node中文官網;
npm init -y初始化文件夾，生成package.json配置文件；
npm install webpack --save-dev本地安裝；
或npm install webpack --global全局安裝；
官網建議本地安裝，靈活度更高；
生產環境安裝包--save，如jQuery.js等；
開發環境安裝包--save-dev，如css-loader；
npm i webpack-cli --save-dev;安裝 webpack-cli用於在命令行中運行webpack；- 配置webpack.config.js文件，安裝所需插件；
npm start運行webpack打包。
"script":{
"start":"webpack --config webpack.config.js"
}
//npm run start 與 npx webpack
windows中路徑調用webpack時，要用反斜線"\”,如start =>
npm node_modules\.bin\webpack --config webpack.config.js；訪問bin版本
配置webpack
//package.json
{
"name":"demo",
"version":"1.0.0",
"description":"",
+ "private":true,//私有化，不發佈
- "main":"index.js",
"scripts":{
"start":"npm webpack --config webpack.config.js",
"public":"npm webpack"
},
"devDependencies":{
"webpack":"^5.0.0",
"webpack-cli":"^3.0.0"
},
"dependencies":{}
}
//webpack.config.js
const HtmlWebpackPlugin = requrie("html-webpack-plugin");
const CleanWebpackPlugin = requrie("clean-webpack-plugin");
module.exports = {
mode:"development",
entry:"./src/index.js",
output:{
filename:"bundle.js",
path:__dirname + "/dist"
},
module:{
rules:[
{
test:/\.css$/,
use:["style-loader","css-loader"]
},{ //url-loader封裝了file-loader
test:/\.(jpg|jpeg|png|gif|svg)$/,
// use:'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/'
use:{
loader:["url-loader"],
options:{
limit:10*1024,
name:"[path][name].[ext]",
outputPath:"img/",
publicPath:"output/"
}
}
]
},
plugins:[
new CleanWebpackPlugin("./dist"),
new HtmlWebpackPlugin({
templete:"./tmp.html"
})
]
}
加載其他類型文件
通過配置方式指定 loader 規則1(loader rules)、插件2 (plugins)、解析選項(resolve options)，以及許多其他增強功能
1.css-loader style-loader
npm install --save-dev css-loader style-loader
其中，css-loader編譯css文件後style-loader插入html中；
module.exports = {
//...
module:{
rules:[
{
test:/\.css$/,
use:["style-loader","css-loader"]
}
]
}
}
2.file-loader
npm install --save-dev file-loader
編譯成__dirname地址，不同於url-loader二進制源文件，url-loader封裝了file-loader；
加載背景和圖片：
module.exports = {
//...
module:{
rules:[
{
test:/\.css$/,
use:["style-loader","css-loader"]
},{
test:/\.(jpg|jpeg|png|gif|svg)$/,
use:["file-loader"]
},{
test:/\.(jpg|jpeg|png|gif|svg)$/,
use:{
loader:["url-loader"],
options:{
limit:"1024"
}
}
}
]
}
}
加載字體：
{
test:/\.(woff|woff2|eot|ttf|otf)$/,
use:["file-loader"]
}
3.csv-loader xml-loader
npm --save-dev csv-loader xml-loader
加載數據 json/csv/tsv/xml：webpack內置解析json，而csv、xml需要csv-loader、xml-loader；
{
test:/\.(csv|tsv)$/,
use:["csv-loader"]
},{
test:/\.xml$/,
use:["xml-loader"]
}
4.html-webpack-plugin
npm install --save-dev html-webpack-plugin處理html文件：
//webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode:"development",
entry:"index.js",
output:{filename:"bundle.js",path:__dirname+"/dist"},
plugins:[
new HtmlWebpackPlugin({title:"val"})
]
}
默認會生成新的index.html
5.clean-webpack-plugin
npm install --save-dev clean-webpack-plugin
清理/dist文件夾：
//webpack.config.js
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports={
entry:{},
output:{filename:"",path:""},
plugins:[
new CleanWebpackPlugin("./dist")
]
}
開發模式：development
source map
development模式下代碼未壓縮，錯誤和警告追蹤，通過devtool配置,更多選項：
module.exports = {
//...
devtool:"inline-source-map",
//...
}
熱更新
- webpack`s Watch Mode
- webpack-dev-server
- webpack-dev-middleware
1.Watch模式
//package.json
{
"name":"demo",
//...
"scripts":{
"watch":"webpack --watch"//npm run watch
}
//...
}
監測更新自動打包代碼，但是瀏覽器不能自動刷新。
2.webpack-dev-server在development模式下不生成靜態文件：
npm webpack-dev-server --open -w
配置總表示例
//package.json
{
"name":"demo",
"version":"1.0.0",
"description":"",
+ "private":true,
- "main":"index.js",
"scripts":{
"start":"npm webpack --config webpack.config.js",
"public":"npm webpack"
},
//安裝各種插件
"devDependencies":{
"webpack":"^5.0.0",
"webpack-cli":"^3.0.0"
//......
},
"dependencies":{}
}
//webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
mode:"development",//production
entry:{
app:".src/app.js"
//name:"xxx.js"
},
output:{
filename:"[name].bundle.js",
path:__dirname + "/dist"
}
module：{
rule:[
{ //加載css文件
test:/\.css$/,
use:["style-loader","css-loader"]
},{ //加載圖片——dirname地址
test:/\.(png|jpg|jpeg|svg|gif)/,
use:["file-loader"]
},{ //url-loader封裝了file-loader
test:/\.(png|jpg|jpeg|svg|gif)/,
//use:'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/'
use:{
loader:["url-loader"],
options:{
limit:"1024",
name:"[name].[hash].[ext]",
outputPath:"img/",
publicPath:"output/"
}
}
},{ //加載字體@font{}
test:/\.(woff|woff2|eot|ttf|otf)$/,
use:["file-loader"]
},{ //加載csv文件
test:/\.(csv|tsv)$/,
use:["csv-loader"]
},{ //加載xml文件
test:/\.xml$/,
use:["xml-loader"]
}
]
},
plugins:[
new CleanWebpackPlugin("./dist"),
new HtmlWebpackPlugin({
temple:("./tmp.html")
})
]
}
Manifest:webpack-manifest-plugin記錄整個bundle的過程;