webpack介紹、基礎配置
webpack介紹
Webpack是一種前端資源構建工具，一個靜態模塊打包器（module bundler）
- webpack可以做的事情
代碼轉換、文件優化、代碼分割、模塊合併、自動刷新、代碼校驗、自動發佈
webpack安裝
- 安裝本地的webpack
- webpack webpack-cli -D（-D是指開發依賴，表示上線不需要這個包）
例如：這裏用的是yarn管理工具
- 初始化：yarn init -y
- 安裝webpack-cli：yarn add webpack webpack-cli -D
webpack可以進行0配置
- 打包工具 -> 輸出後的結果（js模塊）
- 打包（支持我們的js的模塊化）
- 打包命令：npx webpack（webpack5.0以上支持）
執行原理：這樣執行會去找node_modules下的bin文件夾，bin中有webpack.cmd文件，然後就執行webpack/webpack.js文件，然後需要安裝webpack-cli
webpack.cmd
@IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" "%~dp0\..\webpack\bin\webpack.js" %*
) ELSE (
@SETLOCAL
@SET PATHEXT=%PATHEXT:;.JS;=;%
node "%~dp0\..\webpack\bin\webpack.js" %*
)手動配置webpack
- 默認配置文件的名字 webpack.config.js
- 為什麼叫webpack.config.js這個名字？
因為node_moudes下的webpack下會默認調用webpack-cli，webpack-cli裏面有解析module.exports對象中的參數，在config-yargs.js裏，這裏面有解析的關係和説明，你可以搜索關鍵字webpack.config.js來查找。
Webpack 五個核心概念
- Entry：入口
- Output：輸出
- Loader：讓Webpack能夠去處理那些非JavaScript文件
- Plugins：插件
- Mode：Webpack使用相應模式的配置
webpack.config.js
//webpack 是node寫出來的，用node的寫法
let path = require('path');
//console.log(path.resolve('dist'));
module.exports = {
// node配置
mode: 'development',//模式，默認有兩種production / development
// entry 入口配置
entry: './src/index.js',//入口
// output 輸出配置
output: {
filename: 'bundle.js',//打包後的文件名
// __dirname nodejs的變量，代表當前文件的目錄絕對路徑
path: path.resolve(__dirname,'dist')//路徑必須是一個絕對路徑
},
module: {
rules: [
// 詳細loader配置
]
},
// plugins 插件配置
pugins:[
// 詳細plugins的配置
]
}entry配置
/**
* entry: 入口起點
* 1. string --> './src/index.js'
* 單入口
* 打包形成一個chunk，輸出一個bundle文件。
* 2. array --> ['./src/index.js', './src/add.js']
* 多入口
* 所有入口文件最終只會形成一個chunk，輸出去只有一個bundle文件
* --> 只有在HMR功能中讓html熱更新生效~
* 3. object
* 多入口
* 有幾個入口問價就形成幾個chunk，輸出幾個bundle文件
* 此時chunk的名稱是key
* entry: {
index: './src/index.js',
add: './src/add.js'
}
--> 特殊用法
entry: {
index: ['./src/index.js', './src/count.js'],
add: './src/add.js'
}
*/output配置
output: {
// 文件名稱（指定名稱 + 目錄）
filename: 'js/[name].[contenthash:10].js',
// 輸出文件目錄（將來所有資源輸出的公共目錄）
path: resolve(__dirname, 'build'),
// 所有資源引入公共路徑前綴 --> 'imgs/a.jpg' --> 'imgs/a.jpg'
publicPath: '/',
chunkFilename: 'js/[name].[contenthash:10]_chunk.js' // 非入口chunk的名稱
// library: '[name]', // 整個庫向外暴露的變量名 一般不用
// libraryTarget: 'window', // 變量名添加到哪個上 browser
// libraryTarget: 'global', // 變量名添加到哪個上 node
// libraryTarget: 'commonjs'
},module配置
module: {
// loader的配置
rules: [
{
// 處理css資源
test: /\.css$/,
// 多個loader用use
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
]
},
{
// 可以處理less文件,還有sass stylus node-sass sass-loader
// stylus stylus-loader
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader', // 把less -> css 先解析less再執行css
'less-loader' // 把less -> css 先解析less再執行css
]
},
{
// 處理圖片資源
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
// 關閉es6模塊化
esModule: false,
outputPath: 'imgs'
}
},
{
// 處理html中img資源
test: /\.html$/,
loader: 'html-loader'
},
{
// 處理其他資源
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
},
{
/**
* 語法檢查：eslint-loader eslint
* 注意：只檢查自己寫的源代碼，第三方的庫是不用檢查的
* 設置檢查規則：
* package.json中eslintConfig中設置~
* "eslintConfig": {
"extends": "airbnb-base"
}
* airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
*/
test: /\.js$/,
// 排除node_modules下的js文件
exclude: /node_modules/,
// 只檢查src下的js文件
include: resolve(__dirname, 'src'),
// 優先執行
enforce: 'pre',
// 延後執行
// enforce: 'post',
// 單個loader用loader
loader: 'eslint-loader',
options: {
// 自動修復eslint的錯誤
fix: true
}
},
{
// 以下配置只會生效一個
oneOf: []
}
]
},resolve配置
resolve: {
// 配置解析模塊路徑別名：優點簡寫路徑；缺點路徑沒有提示
alias: {
$css: resolve(__dirname, 'src/css')
},
// 配置省略文件路徑的後綴名
extensions: ['.js', '.json', '.jsx', '.css'],
// 告訴webpack解析模塊是去找哪個目錄
modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
}optimization配置
- 引入插件terser-webpack-plugin
npm install terser-webpack-plugin -D - 在webpack.config.js中配置插件
const TerserWebpackPlugin = require('terser-webpack-plugin')
optimization: {
splitChunks: {
chunks: 'all',
/*// 默認值，可以不寫~
minSize: 30 * 1024, // 分割的chunk最小為30kb
maxSiza: 0, // 最大沒有限制
minChunks: 1, // 要提取的chunk最少被引用1次
maxAsyncRequests: 5, // 按需加載時並行加載的文件的最大數量
maxInitialRequests: 3, // 入口js文件最大並行請求數量
automaticNameDelimiter: '~', // 名稱鏈接符
name: true, // 可以使用命名規則
cacheGroups: { // 分割chunk的組
// node_modules文件會被打包到vendors組的chunk中。 --> vendors ~xxx.js
// 滿足上面的公共規則，如：大小超過30kb，至少被引用一次
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
// 要提取的chunk最少被引用2次
minChunks: 2,
// 優先級
priority: -20,
// 如果當前要打包的模塊，和之前被提取的模塊是同一個，就會複用，而不是重新打包
reuseExistingChunk: true
}
}*/
},
// 將當前模塊的記錄其他模塊的hash單獨打包為一個文件runtime
// 解決：修改a文件導致b文件的contenthash變化
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`
},
TerserWebpackPlugin: [
// 配置生產環境的壓縮方案：js和css
new TerserWebpackPlugin({
// 開始緩存
cache: true,
// 開始多進程打包
parallel: true,
// 啓動source-map
sourceMap: true
})
]
}本文章為轉載內容，我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題，歡迎原作者聯繫我們進行內容更正或刪除文章。
