webpack生產環境優化：oneOf 配置
轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name
webpack生產環境優化：oneOf 配置
- 放在oneOf代碼塊中的 loader 只會匹配一個,避免每一個文件在打包時每個loader都要過一遍。
- 注意：不能有兩項配置處理同一種類型的文件
- 例如：js文件的語法檢查和兼容性處理，不能放在同一個oneOf中。
一、核心配置
/*
webpack.config.js webpack的配置文件
路徑： ./webpack.config.js
*/
// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 引入壓縮 css 的插件 optimize-css-assets-webpack-plugin
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
// 設置 nodejs 環境變量,決定使用‘browserslist‘的哪個環境
// process.env.NODE_ENV = 'development';
// 復用 loader
const commonCssLoader = [
// use數組中loader執行順序:從右到左,從下到上依次執行
// 創建style標簽,將js中的樣式資源插入進行,添加到head中生效
// 'style-loader',
// 這個loader取代style-loader。作用:提取js中的css成單獨文件
{
loader: MiniCssExtractPlugin.loader,
options: {
// 這里可以指定一個 publicPath
// 默認使用 webpackOptions.output中的publicPath
publicPath: '../'
},
},
// 將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
'css-loader',
/*
css兼容性處理: postcss --> postcss-loader postcss-preset-env
postcss-preset-env的作用是幫postcss找到package.json中browserslist里面的配置,
通過配置加載指定的css兼容性樣式，可以在 github上找到 browserslist 的更多配置。
以下舉例應該在package.json 配置的內容。
========package.json 文件 begin=========
"browserslist":{
//開發環境-->設置node環境變量: process.env.NODE_ENV = development
"development":[
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 9-12"
],
//生產環境：默認是生產環境
"production":[
">0.2%",
"not dead",
"not op_mini all"
]
},
========package.json 文件 end=========
*/
//使用loader的默認配置
//'postcss-loader"
//修改loader的配置
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss的插件
require('postcss-preset-env')()
]
}
}
]
module.exports = {
// webpack配置
// 入口起點文件
entry: './src/js/index.js',
// 輸出
output: {
// 輸出文件名
filename: 'js/built.js',
// 輸出路徑
// __dirname nodejs的變量,代表當前文件的目錄絕對路徑
path: resolve(__dirname, 'build'),
},
// loader的配置
module: {
rules: [
// 詳細loader配置
//不同文件必須配置不同loader處理
/*
語法檢查: eslint-loader eslint
注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的
設置檢查規則:
airbnb-->eslint-config-airbnb-base eslint-plugin-import eslint
在package.json中eslintConfig中設置
"eslintConfig": {
"extends": "airbnb-base"
}
*/
{
test: /\.js$/,
// 指定檢查的目錄，或者配置排除某些文件夾
// include: [path.resolve(__dirname, 'src')],
// 注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的,這里排除node_modules文件夾
exclude: /node_modules/,
loader: 'eslint-loader',
/*
1. pre 優先處理
2. normal 正常處理（默認）
3. inline 其次處理
4. post 最后處理
*/
enforce: 'pre',
options: {
// 這里的配置項參數將會被傳遞到 eslint 的 CLIEngine
// 自動修復eslint的錯誤
fix: true,
},
},//語法檢查loader 配置 end
{
// 以下 loader 只會匹配一個
// 注意：不能有兩項配置處理同一種類型的文件
// 例如：js文件的語法檢查和兼容性處理，不能放在同一個oneOf中。
oneOf: [
// 打包 css 文件的詳細loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader進行處理
use: [...commonCssLoader],
},
//打包less 文件的詳細loader配置
{
//匹配哪些文件
test: /\.less$/,
//使用哪些loader進行處理
use: [
...commonCssLoader,
//將less文件編譯成css文件
//需要下載less-loader和less
'less-loader'
]
},
/*
js兼容性處理:babel-loader @babel/core @babel/preset-env
1.基本js兼容性處理 @babel/preset-env
問題：只能轉換基本語法，如promise不能轉換
2．全部js兼容性處理 --> @babel/polvfill
問題：我只要解決部分兼容性問題，但是將所有兼容性代碼全部引入，體積太大了~
3. 需要做兼容性處理的就做：按需加載 --> core-js
*/
{
test: /\.(?:js|mjs|cjs)$/,
// 指定檢查的目錄，或者配置排除某些文件夾
// include: [path.resolve(__dirname, 'src')],
// 注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的,這里排除node_modules文件夾
loader: "babel-loader",
exclude: /node_modules/,
options: {
// 預設：指示 babel 做怎么樣的兼容性處理
"presets": [
[
"@babel/preset-env",
{
// 按需加載
useBuiltIns: 'usage',
// 制定 core-js 版本
corejs: {
version: 3
},
//指定兼容性做到哪個版本的瀏覽器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
},
{
// 問題：默認處理不了 html 中的 img 圖片
// 處理圖片資源
test: /\.(jpg|png|gif)$/,
// 使用一個loader
// 下載url-loader file-loader
loader: 'url-loader',
options: {
// 圖片大小小于8kb,就會被base64處理
// 優點:減少請求數量(減輕服務器壓力)
// 缺點:圖片體積會更大(文件請求速度更慢)
limit: 8 * 1024,
// 問題:因為url-loader默認使用es6模塊化解析, 而html-loader默認引入圖片是commonjs
// 解析時會出問題: [object Module]
// 解決:關閉url-loader的es6模塊化,使用commonjs解析
esModule: false,
// 給圖片進行重命名
// [hash:10]取圖片的hash的前10位
// [ext]取文件原來擴展名
name: '[hash:10].[ext]',
// 設置輸出目錄，將打包的圖片資源放到imgs文件夾
outputPath: './imgs',
},
},
{
test: /\.html$/,
// 處理html文件的img圖片(負責引入img,從而能被url-loader進行處理)
loader: 'html-loader',
options:
{
// 默認情況下,生成使用ES塊語法的Js模塊
// 問題:生成的圖片顯示錯誤
// 解決: esModule改為false
esModule: false,
},
},
{
// 打包其他資源(除了html/js/css資源以外的資源)
// 排除css/is/html資源
exclude: /\.(css|js|html|less|jpg|png|gif)$/,
loader: 'file-loader',
options:
{
// 給資源進行重命名
// [hash:10]取資源的hash的前10位
// [ext]取文件原來擴展名
name: '[hash:10]. [ext]',
// 設置輸出目錄，將打包的其他資源放到media 文件夾
outputPath: './media',
},
},
]// oneOf [] end
}// oneOf end
],
},
// plugins的配置
plugins: [
// 詳細的plugins配置
// html-webpack-plugin
// 功能:默認會創建一個空的HTML, 自動引入打包輸出的所有資源(JS/CSS)
// 需求:需要有結構的HTML文件
new HtmlWebpackPlugin({
// 復制../src/index.html'文件,并自動引入打包輸出的所有資源(JS/CS5)
template: './src/index.html',
//壓縮 html 代碼
minify: {
//移除空格
collapseWhitespace: true,
//移除注釋
removeComments: true
}
}),
new MiniCssExtractPlugin({
//對輸出的css文件進行重命名，這里單獨為生成的 css 創建一個 css 文件夾。
filename: './css/[name].css',
chunkFilename: "./css/[id].css",
ignoreOrder: false,
linkType: "text/css",
}),
// 壓縮 css
new OptimizeCssAssetsWebpackPlugin(),
],
// 模式 development 開發環境，production 生產環境
// mode: 'development',
// 生產環境下會自動壓縮js代碼
mode: 'production',
// 開發服務器devServer:用來自動化(自動編譯, 自動打開瀏覽器, 自動刷新瀏覽器)
// 特點:只會在內存中編譯打包,不會有任何輸出
// 啟動devServer指令為: npx webpack-dev-server
devServer: {
// 項目構建后路徑
contentBase: resolve(__dirname, 'build'),
// 啟動gzip壓縮
compress: true,
// 端口號
port: 3000,
// 自動打開瀏覽器
open: true,
},
};
核心配置
/*
webpack.config.js webpack的配置文件
路徑： ./webpack.config.js
*/
……
module.exports = {
……
// loader的配置
module: {
rules: [
// 詳細loader配置
//不同文件必須配置不同loader處理
//……這里放一個 js 處理 loader，例如放 eslint js 語法檢查……
{
test: /\.js$/,
……
},//語法檢查loader 配置 end
// ***********這里的配置**********
{
// oneOf: [ ] 代碼塊放在 {}中當做一個 loader,其他需要放進去的 loader 直接嵌套進去[]即可。
// 以下 loader 只會匹配一個
// 注意：不能有兩項配置處理同一種類型的文件
// 例如：js文件的語法檢查和兼容性處理，不能放在同一個oneOf中。
// ***********這里的配置**********
oneOf: [
// 打包 css 文件的詳細loader配置
{
// 匹配哪些文件
test: /\.css$/,
……
},
//打包less 文件的詳細loader配置
{
//匹配哪些文件
test: /\.less$/,
……
},
{
test: /\.(?:js|mjs|cjs)$/,
……
},
{
// 問題：默認處理不了 html 中的 img 圖片
// 處理圖片資源
test: /\.(jpg|png|gif)$/,
……
},
{
test: /\.html$/,
……
},
{
// 打包其他資源(除了html/js/css資源以外的資源)
// 排除css/is/html資源
exclude: /\.(css|js|html|less|jpg|png|gif)$/,
……
},
]// oneOf [] end
}// oneOf {} end
],
},
// plugins的配置
plugins: [
// 詳細的plugins配置
……
],
// 模式 development 開發環境，production 生產環境
// mode: 'development',
// 生產環境下會自動壓縮js代碼
mode: 'production',
};
浙公網安備 33010602011771號