一些背景：
同事告訴我，新版本的 Webpack 處理不同檔案中的配置：webpack.development.config.js，webpack.production.config.js ......（你甚至可以創建自定義模式）。但他們不知道如何解釋整件事。只是現在一切都是用多個組態檔完成的。
從官方檔案中，我看到不同的模式在頂部有一條注釋，說明了不同的檔案名：
發展
// webpack.development.config.js
module.exports = {
mode: 'development',
};
生產
// webpack.production.config.js
module.exports = {
mode: 'production',
};
所以這一定有一些道理，我想遵循最佳實踐。將不同模式的配置分開似乎是一件好事。
但我不知道我現在應該如何正確加載插件。
我曾經在我的檔案頂部有這個：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const WatchTimePlugin = require('webpack-watch-time-plugin');
const cssnano = require('cssnano');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
所以，這最終給我留下了以下問題。
問題
我還需要 Webpack 的全域組態檔嗎？如果沒有任何全域組態檔，我怎么能有我想要為生產和開發運行的常見任務？
webpack 會加載所有名為 webpack.xxxxxx.config.js 的檔案嗎？我可以用那個名字創建我喜歡的任何組態檔，它會考慮到它們嗎？
如何為 dev 和 prod 實作通用配置，然后為 dev 和 prod 實作特殊的擴展配置？
我發現檔案并不是很清楚這一切。所以任何幫助將不勝感激。
uj5u.com熱心網友回復：
這真的取決于插件，例如，HtmlWebpackPlugin將腳本和樣式注入 html 模板，這是您在開發和生產構建中都需要的東西。
MinicssExtractPlugin另一方面，將 CSS 提取到單獨的檔案中，您在開發中可能不需要這些檔案。
我建議您準備筆和紙，訪問每個插件的網站并確定該插件是否：
- 是（或可以）用于開發和生產
- 僅用于開發（
react-refresh-webpack-plugin例如） - 僅用于生產（我放在
MiniCssExtractPlugin這里）
然后在配置中：
// webpack.shared.config.js
module.exports = {
plugins: [
// Shared plugins
]
};
// webpack.development.config.js
module.exports = {
plugins: [
// Dev only plugins
]
};
// webpack.production.config.js
module.exports = {
plugins: [
// Prod only plugins
]
};
組織插件的一個好方法是：
- 它是否改善了用戶體驗（加載時間、使用情況）？
- 該應用程式是否需要運行？
- 對開發有幫助嗎
如果你的答案是：
- 是，不，不：生產插件
- 不，是，不：生產插件
- 不，不，是：開發插件
- 是，不，是：共享插件
- 是的，是的，不：生產插件
- 是的，是的，是的：共享插件
webpack 會加載所有名為 webpack.xxxxxx.config.js 的檔案嗎？我可以用那個名字創建我喜歡的任何組態檔，它會考慮到它們嗎？
Webpack 自動（如果沒有在命令列中指定配置）只加載一個名為webpack.config.js. 如果它不存在，則它使用默認配置。您應該始終指定使用的組態檔：
npx webpack --config config/webpack.config.js
我建議您執行以下操作將開發和生產配置分開
npm install webpack-merge --save-dev
# or if you're using yarn
yarn add webpack-merge --dev
目錄結構：
src
|_ Some files
|_ Other files
package.json
config
|_webpack.shared-config.js
|_webpack.dev-config.js
|_webpack.prod-config.js
// config/webpack.shared.config.js
module.exports = {
// Configuration to be used in both modes, `entry` goes here
};
// config/webpack.dev-config.js
let {merge} = require("webpack-merge");
module.exports = merge(require("./webpack.shared-config.js"), {
mode: "development",
// Other dev only config
});
// config/webpack.prod-config.js
let {merge} = require("webpack-merge");
module.exports = merge(require("./webpack.shared-config.js"), {
mode: "production",
// Other production only config
});
然后你可以在 webpack cli 中指定組態檔：
npx webpack --config config/webpack.dev-config.js
# or, in production
npx webpack --config config/webpack.prod-config.js
此外，您可以將構建（和服務）腳本添加到package.json：
{
// ...
"scripts": {
"build": "webpack --config config/webpack.prod-config.js",
"build-dev": "webpack --config config/webpack.dev-config.js",
"serve": "webpack serve --hmr --config config/webpack.dev-config.js",
"serve-prod": "webpack serve --config config/webpack.prod-config.js",
}
// ...
}
筆記：
webpack serve需要webpack-dev-server安裝：
npm install webpack-dev-server --save-dev
# or
yarn add webpack-dev-server --dev
webpack-merge進行深度合并：
let a = {
b: {
c: [1]
}
};
console.log(
merge(a, {
b: {
c: [2]
}
})
);
// Outputs:
// {
// b: {
// c: [1, 2]
// }
// }
- 合并的物件不一定需要是 webpack 配置，它可以是任何東西。
另見：
- https://webpack.js.org/guides/production/
- https://dev.to/marcinwosinek/tutorial-for-building-multipage-website-with-webpack-4gdk (<3)
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/392976.html
標籤：网络包
上一篇：警告：React.createElement：型別無效——需要一個字串（對于內置組件）（ReactWebpackPhaser）