構成とオプションの使用
15957 ワード
這個章節會介紹到基本的 webpackの設定設定的實際使用,透過設定的層層疊加,並討論組態設定、資源管理、輸出管理、對 Webpack的設定.
在 パッケージ.JSON中指定 webpackの設定的設定檔案名稱
モード可以針對不同的輸出模式進行優話
エントリー預設為 src 底下目錄,代表開始封裝的起始目錄位置
設定輸出路徑,輸出檔案名稱,以及公共路徑位置,図書館設定輸出給其他第三方的名稱,ライブラリターゲット可以指定引用語句類型
設定模組內需要引用的檔案規則,可以引入指定目錄,或是將其排除
発行者指定支援的使用,如 SVG檔案可讓 js副檔名的檔案,進行加載
pre優先 ノーマル正常 インライン其次 ポスト最後
限制效能警告
當檔案過大造成效能頻緊時,提出緊告
設定啟動開發測試環境,實現 ライブリロード
安裝資源載入相應套件
除了一般的 CSS圖檔以外,也可以載入文字資源檔
安裝資源載入相應套件
使用 HTMLプラグイン透過 webpack設定.js來設定 HTML內容
在開發中我們輸出至ディスト的目錄內,可能會有很多殘留檔案,可以透過以下工具,清理目錄內容
保釈する參數設定為布林值,會強迫 Webpack在編譯中發生錯誤問題後,立刻終止
のプロフィール布林屬性,提供分析資料,可使用 進行分析 並列正整數並行數量,透過並行的方式執行各個模組 レコードパス:字串路徑,紀錄コード分割跨檔案之間的關聯,以便確保緩存(キャッシング)行為能正常再分散的檔案中. 第三章節 構成とオプションの使用結束 🎉
第四章會介紹更多的第三方 Webpack套件,指導我們如何應用 Webpack整合各式的開發工具,以及使用 Webpack進行各種複雜的建置設定.
💈 基本 webpackの設定設定指南 💈
1 .使用不同的設定檔
在 パッケージ.JSON中指定 webpackの設定的設定檔案名稱
"scripts": {"build": "webpack --config example.config.js" }
2 .設定模組選項
モード可以針對不同的輸出模式進行優話
エントリー預設為 src 底下目錄,代表開始封裝的起始目錄位置
const path = require('path');
module.exports = {
mode: "production", // "production" | "development" | "none"
entry: "./app/entry", // string | object | array
3 .輸出選項
設定輸出路徑,輸出檔案名稱,以及公共路徑位置,図書館設定輸出給其他第三方的名稱,ライブラリターゲット可以指定引用語句類型
output: {
path: path.resolve(__dirname, "dist"), // string
filename: "bundle.js", // string
publicPath: "/assets/", // string
library: "MyLibrary", // string,
libraryTarget: "umd", // universal module definition
},
4 .引用檔案名稱規則
設定模組內需要引用的檔案規則,可以引入指定目錄,或是將其排除
module: {
rules: [{
test: /\.jsx?$/,
include: [ path.resolve(__dirname, "app") ],
exclude: [
path.resolve(__dirname, "app/demo-files")
],
施行・発行者
発行者指定支援的使用,如 SVG檔案可讓 js副檔名的檔案,進行加載
{
test: /\.svg(\?.*)?$/,
issuer: /\.js$/,
loader: 'svg-inline-loader'
}
設定 施行する指定載入順序enforce: "pre" | enforce: "post"
パフォーマンス
限制效能警告
當檔案過大造成效能頻緊時,提出緊告
performance: {
hints: "warning", // enum
maxAssetSize: 200000, // int (in bytes),
maxEntrypointSize: 400000, // int (in bytes)
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
7 . devserver
設定啟動開發測試環境,實現 ライブリロード
devServer: {
proxy: { '/api':'http://localhost:3000' },
contentBase: path.join(__dirname, 'public'),
compress: true,
historyApiFallback: true,
hot: true,
https: false,
noInfo: true,
},
運行 サーバnpx webpack serve
資源管理
CSS /イメージ/ WOFF資源檔案
安裝資源載入相應套件
npm install --save-dev style-loader css-loader file-loader
📚 設定資源載入套件module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}, {
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
}
]}
載入後就可以在js中透過輸入加載資源檔import './style.css';
import Icon from './icon.png';
CSS中加載字型@font-face {
font-family: 'SampleFont';
src: url('./sample-font.woff2') format('woff2'),
url('./sample-font.woff') format('woff');
}
JSON / CSV / XML資源檔案
除了一般的 CSS圖檔以外,也可以載入文字資源檔
安裝資源載入相應套件
npm install --save-dev csv-loader xml-loader
設定資源載入{
test: /\.(csv|tsv)$/,
use: ['csv-loader']
},
{
test: /\.xml$/,
use: ['xml-loader']
}
載入資源import Data from './data.xml';
HTMLWebPackupプラグイン
使用 HTMLプラグイン透過 webpack設定.js來設定 HTML內容
npm install --save-dev html-webpack-plugin
EX :設定網頁 タイトルconst HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
}
)]
清除發布目錄
在開發中我們輸出至ディスト的目錄內,可能會有很多殘留檔案,可以透過以下工具,清理目錄內容
npm install --save-dev clean-webpack-plugin
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin(),
],
保釈する
保釈する參數設定為布林值,會強迫 Webpack在編譯中發生錯誤問題後,立刻終止
module.exports = {bail: true};
其他介紹的屬性參數
第四章會介紹更多的第三方 Webpack套件,指導我們如何應用 Webpack整合各式的開發工具,以及使用 Webpack進行各種複雜的建置設定.
Reference
この問題について(構成とオプションの使用), 我々は、より多くの情報をここで見つけました https://dev.to/hyperredstart/using-configurations-and-options-3cifテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol