一、webpack的基本配置
運行 npm install webpack webpack-cli -D 命令安裝webpack 相關的包
在項目的根目錄中，創建名為webpack.config.js的webpack配置文件
在webpack的配置文件中，初始化如下基本配置：
module.exports={
//編譯模式
mode:'development' //development表示開發階段 production表示生產階段
}
1
2
3
4
在package.json配置文件中的scrpts節點下，新增dev腳本如下：
"scripts":{ //script節點下的腳本，可以通過npm run執行
"dev":"webpack"
}
1
2
3
在終端中運行npm run dev命令，啟動webpack進行項目打包
二、webpack的基本使用
1.配置webpack打包的入口與出口
在webpack的4.x版本中默認約定：打包的入口文件時src目錄下的index.js，打包的輸出文件是dist目錄下的main.js，如果要修改打包的入口與出口，可以在webpack.config.js中配置如下信息：
const path = require('path')//導入node.js中的path模塊用來獲取當前目錄的絕對路徑
module.exports = {
//編譯模式
mode: 'production',
//配置入口文件的絕對路徑
entry: path.join(__dirname, './src/index.js'),
//配置輸出文件
output: {
path: path.join(__dirname, './dist'), //輸出文件存放的路徑
filename: 'index.js' //輸出文件的名稱
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2.配置webpack的自動打包功能
當你每次修改完代碼后，需要重新執行npm run dev命令重新打包才能看到你代碼修改后的效果，是不是很麻煩，接下來就來介紹一下web的自動打包功能：
運行npm install webpack-dev-server -D命令安裝支持項目自動打包的工具
修改package.json文件中的scripts的dev命令如下所示：
"scripts":{
"dev":"webpack-dev-server"
}
1
2
3
將src下的index.html中的，引入的script腳本的路徑改成更目錄下的路徑，例如將"…/dist/index.js",改為"/index.js"
運行npm run dev命令，重新打包
在瀏覽器中就可以通過http://localhost:8080地址，查看自動打包的效果，
這樣每次修改完代碼一保存，就自動幫你打包了
如果你想打包完成的一瞬間自動打開瀏覽器訪問頁面可以如下配置：
//package.json中的配置
//--open 打包完成后自動開的瀏覽器頁面
//--host 配置iP地址
//--port 配置端口
"scripts":{
"dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}
1
2
3
4
5
6
7
注意
webpack-dev-server 會啟動一個實時打包的http服務器，它會監聽代碼，只要代碼發生了變化就會自動打包
webpack-dev-server 自動打包生成的輸出文件，默認放到了項目的根目錄中，是虛擬的，看不到
3.配置html-webpack-plugin生成預覽頁面
運行 npm install html-webpack-plugin -D命令，安裝生成預覽頁面的插件
修改webpack.config.js文件頂部區域，添加如下配置信息：
//導入生成預覽頁面的插件，得到一個構造函數
const HtmlWebpackPlugin=require('html-webpack-plugin');
const htmlPlugin=new HtmlWebpackPlugin({//創建一個構造函數的實例對象
template:'./src/index.html',//指定要用到的模板文件
filename:'index.html'//指定生成文件的名稱，該文件在內存中，在目錄中看不到
})
1
2
3
4
5
6
修改webpack.config.js文件添加向外暴露的配置節點：
plugins: [htmlplugin] //plugins數組是webpack會用到的一些插件列表
1
三、webpack中的加載器
在實際開發過程中，webpack默認只能打包處理以.js為后綴名結尾的模塊，其他非.js結尾的模塊，webpack默認處理不了，需要調用loader加載器才可以正常打包，否則會報錯！loader加載器可以協助webpack打包處理帶待定的文件模塊，比如：
less-loader 可以打包處理.less相關的文件
sass-loader 可以打包處理 .scass相關的文件
url-loader 可以處理.css中與url路徑相關的文件
1.如何打包處理css文件
運行 npm i style-loader css-loader -D 命令，安裝處理css文件的loader
在webpack.config.js的module->rules數組中，添加loader規則如下：
//所有第三方文件模塊的匹配規則
module:{
rules:[//test是一個正則代表匹配文件的類型，use表示對應要調用的loader
{test:/\.css$/,use:['style-loader','css-loader']}//注意：use數組中指定的loader順序是固定的，不能顛倒，多個loader的是從后往前調用的
]
}
1
2
3
4
5
6
2.打包處理less文件
運行 npm i less-loader less -D 命令
在webpack.config.js的module->rules數組中，添加loader規則如下：
module:{
rules:[
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
]
}
1
2
3
4
5
3.配置postCSS自動添加css的兼容性前綴
運行npm i postcss-loader autoprefixer -D 命令
在項目根目錄下創建postcss的配置文件postcss.config.js,並初始化如下配置：
const autoprefixer=require('autoprefixer')//導入自動添加前綴的插件
module.exports={
plugins:[autoprefixer]
}
1
2
3
4
在webpack.config.js的module->rules數組中，修改css的loader規則如下:
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
]
}
1
2
3
4
5
4.打包樣式表中的圖片和字體文件
運行npm i url-loader file-loader -D 命令
在webpack.config.js的module->rules數組中，添加loader規則如下：
module:{
rules:[//?之后的是loader的參數項，單位是byte，只有小於limit大小的圖片才會被轉為base64圖片
{test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=16940'}
]
}
1
2
3
4
5
5.打包處理js文件中的高級語法
安裝babel轉換相關的包：npm i babel-loader @babel/core @babel/runtime -D
安裝babel語法插件相關的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
在項目根目錄中，創建babel配置文件babel.config.js並初始化基本配置如下：
module.exports={
presets:['@babel/preset-env'],
plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}
1
2
3
4
在webpack.config.js的module->rules數組中，添加loader規則如下：
//exclude為排除項,表示babel-loader不需要處理node_modules中的js文件
{test:/\.js$/,use:['babel-loader'],exclude:/node_modules/}
1
2
webpack的整體打包發布
通過配置package.json文件配置打包命令如下：
//該命令默認加載項目根目錄中的webpack.config.js配置文件
"scripts":{
//用於打包的命令
"build":"webpack -p",
//用於調試的命令
"dev":"webpack-dev-server --open --host 127.0.0.1 --port 3000",
}
————————————————
版權聲明：本文為CSDN博主「LiSmallStick」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_47356255/article/details/106046809