Webpack基礎入門
Webpack基礎入門
優秀的打包工具,減少前端工作量,模組化程式設計,彌補browser
安裝
- 基於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二進位制原始檔;
載入背景和圖片:
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的過程;