梱包ツール
フレームワーク (React、Vue)、ES6 モジュラー構文、Less/Sass およびその他の CSS プリプロセッサーおよびその他の構文を使用して開発されたコードは、実行する前に、ブラウザーが認識できる JS、CSS、およびその他の構文にコンパイルする必要があります。
したがって、これらのことを行うのに役立つパッケージ化ツールが必要です。さらに、パッケージ化ツールは、コードの圧縮、互換性処理の実行、コードのパフォーマンスの向上なども行うことができます。
どのような梱包ツールがありますか?
イサキ、ガルプ、パーセル、ウェブパック、ロールアップ、ヴァイト
ウェブパックとは
Webpack は、フロントエンドの静的リソース パッケージ化ツールです。Webpack の観点から見ると、フロントエンドのすべてのリソース ファイル (js/json/css/img/less/…) はモジュールとして処理されます。パッケージ化のエントリ ポイントとして 1 つ以上のファイルを使用し、プロジェクト全体のすべてのファイルを 1 つ以上のファイルにコンパイルして結合し、出力します。出力ファイルはコンパイルされたファイルであり、ブラウザ セクションで実行できます。モジュールの依存関係に基づいて静的解析を実行し、対応する静的リソース (バンドル) をパッケージ化して生成します。
Webpack 自体には機能が制限されています。
開発モード: ES モジュール構文を JS でのみコンパイルできます。
本番モード: ES モジュール構文を JS でコンパイルでき、JS コードを圧縮することもできます。
Webpack の 5 つの中心的な概念
1.
エントリ (Entry) は、パッケージ化を開始し、内部依存関係グラフを分析および構築するためのエントリ開始点としてどのファイルを使用するかを webpack に指示します。
2.
出力 (Output) は、パッケージ化されたリソース バンドルを出力する場所と名前の付け方を webpack に指示します。
3. ローダー
ローダーを使用すると、Webpack が非 JavaScript ファイルを処理できるようになります (Webpack 自体は JavaScript のみを理解します)。
4.プラグインプラグイン
を使用すると、より幅広いタスクを実行できます。プラグインは、パッケージ化の最適化と圧縮から、環境内の変数の再定義まで多岐にわたります。
5. モード
mode (Mode) は、対応するモードの設定を使用するように webpack に指示します。
Webpackの基本的な使い方
npm init -yパッケージ記述ファイルを初期化します。実行後、package.json が生成されます
。Webpack (開発モード) を有効にします。npx webpack ./src/main.js --mode=development構成ファイルを書き込むたびに、npx webpack
成功マークを直接設定します。
デフォルトでは、Webpack はパッケージ化して出力します。ファイルを dist ディレクトリにコピーします。
webpackの基本構成
プロジェクトのルート ディレクトリに新しい構成ファイルを作成します: webpack.config.js
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
module.exports = {
// 入口
// 相对路径和绝对路径都行
entry: "./src/main.js",
// 输出
output: {
// path: 文件输出目录，必须是绝对路径
// path.resolve()方法返回一个绝对路径
// __dirname 当前文件的文件夹绝对路径
path: path.resolve(__dirname, "dist"),
// 入口文件输出路径
filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
// clean: true, // 自动将上次打包目录资源清空
},
// 加载器
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "development", // 开发模式
};
Webpack は Node.js に基づいて実行されるため、Common.js モジュラー仕様が採用されています。
スタイルリソースの処理
Webpack 自体はスタイル リソース (Css、Less、Sass、Scss、Styl) を認識できないため、Webpack がスタイル リソースを解析できるようにするために Loader を使用する必要があります。
CSSリソースを処理する
2 つのローダーをダウンロードする必要があります。npm i css-loader style-loader -D
css-loader: CSS ファイルを Webpack が認識できるモジュールにコンパイルします。
style-loader: Webpack 内の CSS モジュール コンテンツを含む Style タグを動的に作成します。
使用法: webpack.config.js のルールに追加します。
rules: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
],
src/css/index.css：
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
src/main.js：
import count from "./js/count";
// 引入 Css 资源，Webpack才会对其打包
import "./css/index.css";
console.log(count(2, 1));
public/index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webpack5</title>
</head>
<body>
<h1>Hello Webpack5</h1>
<!-- 准备一个使用样式的 DOM 容器 -->
<div class="box1"></div>
<!-- 引入打包后的js文件，才能看到效果 -->
<script src="../dist/static/js/main.js"></script>
</body>
</html>
次のコマンドを実行しnpx webpack、index.html ページを開いて効果を確認します。
同じ原則が他の (Less、Sass、Scss、Styl) にも当てはまります。公式 Web サイトの設定に従ってください。
プロセス画像リソース
Webpack4 はファイル ローダーと URL ローダーを通じて画像リソースを処理しますが、Webpack5 では Webpack に 2 つのローダー機能が組み込まれており、画像リソースを処理するために必要な設定は簡単です。
使用法: webpack.config.js のルールに追加します。
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
//对图片资源进行优化
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
}
},
generator: {
//修改输出资源的名称和路径
// 将图片文件输出到 static/imgs 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/imgs/[hash:8][ext][query]",
},
},
画像リソースの最適化: 特定のサイズより小さい画像をデータ URI 形式 (Base64 形式、利点: リクエスト数の削減、欠点: サイズが大きい) に変換します。画像はデータ URI の形式で js に組み込まれ、dist への出力はありません。 。(注:効果を得るには、最後のパッケージ化によって生成されたファイルをクリアしてから再パッケージ化する必要があります)
Webpack は、パッケージ化されたすべての画像リソースを dist ディレクトリに出力します。スタイル リソースは style-loader によって処理され、main.js にパッケージ化されるため、追加の出力はありません。
type: "asset/resource" は、ファイルを Webpack が認識できるリソースに変換し、残りを処理しない file-loader と同等です。type: "asset" は、ファイルを
Webpack が認識できるリソースに変換する url-loader と同等です。認識できると同時に、一定サイズ以下のリソースはデータURI形式に加工されます。
プロセスjsリソース
Webpack の js の処理には制限があり、js 内の ES モジュラー構文のみをコンパイルでき、他の構文はコンパイルできません。その結果、IE などのブラウザーでは js を実行できなくなり、互換性処理を行う必要があります。次に、開発中、チームにはコード形式に関する厳しい要件があり、それを検出するために専門的なツールを使用する必要があります。js 互換処理には Babel を使用し、コード形式には Eslint を使用します。
エスリント
js および jsx の構文を検出するツールです。Eslint 設定ファイルにさまざまなルールを記述します。将来 Eslint を実行するときに、記述されたルールに基づいてコードがチェックされます。
1. パッケージをダウンロードします。npm i eslint-webpack-plugin eslint -D
2. Eslint 構成ファイルを定義します.eslintrc.js。
module.exports = {
// 继承 Eslint 规则
extends: ["eslint:recommended"],
env: {
node: true, // 启用node中全局变量
browser: true, // 启用浏览器中全局变量
},
parserOptions: {
// 解析选项
ecmaVersion: 6, // ES 语法版本
sourceType: "module", // ES 模块化
ecmaFeatures: {
// ES 其他特性
jsx: true // 如果是 React 项目，就需要开启 jsx 语法
}
},
rules: {
"no-var": 2, // 不能使用 var 定义变量
},
};
rules 特定のルール:
「オフ」または 0 - ルールをオフにする
「警告」または 1 - ルールをオンにし、警告レベルを使用します。 エラー: 警告 (プログラムは終了しません)
「エラー」または 2 - ルールをオンにします、エラー レベルのエラーを使用します: エラー (トリガーされると、プログラムは終了します)
継承の拡張: 開発中にルールを少しずつ書くのは大変なので、既存のルールを継承するより良い方法があります: Eslint
公式ルール: eslint:推奨
Vue Cli 公式ルール: plugin:vue/essential
React Cli 公式ルール:反応アプリ
3. main.jsを変更する
4. webpack.config.js を設定します。
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
……
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "src"),
}),
],
5. 次のコマンドを実行します。npx webpack
VSCode には Eslint プラグインがあるため、コンパイルせずにエラーを確認できます。このとき、プロジェクト内のすべてのファイルはデフォルトで Eslint によってチェックされ、dist ディレクトリ内のパッケージ化されたファイルについてエラーが報告されます。
したがって、src 配下のファイルをチェックするだけでよく、dist 配下のファイルをチェックする必要はないので、Eslint を使用してファイルを無視してください。プロジェクトのルート ディレクトリに次のファイルを作成します.eslintignore。
# 忽略dist目录下所有文件
dist
バベル
JavaScript コンパイラ。主に、ES6 構文で記述されたコードを下位互換性のある JavaScript 構文に変換し、現在および古いバージョンのブラウザまたはその他の環境で実行できるようにするために使用されます。
1. パッケージをダウンロードします。npm i babel-loader @babel/core @babel/preset-env -D
2. Babel 構成ファイルを定義しますbabel.config.js。
module.exports = {
presets: ["@babel/preset-env"],
};
プリセット: Babel の機能を拡張する Babel プラグインのセットです。
@babel/preset-env: 最新の JavaScript の使用を可能にするスマート プリセット。
@babel/preset-react: React jsx 構文をコンパイルするためのプリセット。
@babel/preset-typescript: TypeScript 構文をコンパイルするためのプリセット。
3. main.jsを変更する
4. webpack.config.js を設定します。
ルールに次を追加します。
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules代码不编译
loader: "babel-loader",
},
5. 次のコマンドを実行します。npx webpack
HTMLリソースの処理
1. パッケージをダウンロードします。npm i html-webpack-plugin -D
2. webpack.config.js を構成します。
const HtmlWebpackPlugin = require("html-webpack-plugin");
……
plugins: [
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, "public/index.html"),
}),
],
3.index.html を変更します。インポートされた js ファイルは、HtmlWebpackPlugin によって自動的に導入されるため、削除します。
4. 次のコマンドを実行します。npx webpack
オートメーション
コードを書き終わるたびに手動でコードをコンパイルする指示を入力するのは面倒なので、開発サーバーを使って自動化しましょう。
1. パッケージをダウンロードします。npm i webpack-dev-server -D
2. webpack.config.js を構成します。
module.exports = {
// 添加开发服务器
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否自动打开浏览器
},
};
3. コマンドを実行します。npx webpack serve
注: 開発サーバーを使用する場合、すべてのコードはメモリ内でコンパイルおよびパッケージ化され、dist ディレクトリには出力されません。開発時には、コードが実行可能かどうか、効果があるかどうかだけを気にする必要があり、コードが何にコンパイルされるかを知る必要はありません。
本番モード
実稼働モードでは、コードが開発された後、コードを取得して、将来的にそれをオンラインでデプロイする必要があります。このモードは主にコードの実行パフォーマンスとコードのパッケージ化速度を最適化します。元のwebpack.config.jsは2つになります。
ファイルディレクトリ:
├── webpack-test (项目根目录)
├── config (Webpack配置文件目录)
│ ├── webpack.dev.js(开发模式配置文件)
│ └── webpack.prod.js(生产模式配置文件)
├── node_modules (下载包存放目录)
├── src (项目源码目录，除了html其他都在src里面)
│ └── 略
├── public (项目html文件)
│ └── index.html
├── .eslintrc.js(Eslint配置文件)
├── babel.config.js(Babel配置文件)
└── package.json (包的依赖管理配置文件)
ファイル ディレクトリが変更されたため、対応するファイルを見つけるためにすべての相対パスを 1 つ前のディレクトリに戻す必要があり、webpack.dev.js を変更する必要があります。
path: undefined, // 开发模式没有输出，不需要指定输出目录
// clean: true, // 开发模式没有输出，不需要清空输出结果
context: path.resolve(__dirname, "../src"),
template: path.resolve(__dirname, "../public/index.html"),
開発モードを実行する手順:npx webpack serve --config ./config/webpack.dev.js
webpack.prod.js を変更します。
path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
mode: "production",
本番モードを実行する手順:npx webpack --config ./config/webpack.prod.js
クイック実行命令を構成する
さまざまなモードで命令を実行しやすくするために、package.json のスクリプトで命令を定義します。
// package.json
{
// 其他省略
"scripts": {
"start": "npm run dev",
"dev": "npx webpack serve --config ./config/webpack.dev.js",
"build": "npx webpack --config ./config/webpack.prod.js"
}
}
後の起動手順: (start を run に追加する必要はありません。その他は追加する必要があります)
開発モード:npm startまたはnpm run dev
運用モード:npm run build
CSSを個別に扱う
CSS ファイルは現在 js ファイルにパッケージ化されています。js ファイルが読み込まれると、スタイルを生成するためのスタイル タグが作成されます。このようにして、Web サイトではスプラッシュ スクリーン現象が発生し、ユーザー エクスペリエンスが低下します。リンク タグを使用すると、ロードのパフォーマンスが向上するため、別の CSS ファイルにする必要があります。
1. パッケージをダウンロードします。npm i mini-css-extract-plugin -D
2. webpack.prod.js を構成します。
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
rules: [
{
test: /\.css$/,
// 将先前的"style-loader"替换成MiniCssExtractPlugin.loader
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
plugins: [
// 提取css成单独文件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: "static/css/main.css",
}),
],
3. 次のコマンドを実行します。npm run build
CSS互換性の処理
1. パッケージをダウンロードします。npm i postcss-loader postcss postcss-preset-env -D
2. webpack.prod.js を構成します。
rules:[
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
"less-loader",
],
},
]
構成が多すぎる場合、上記の互換性処理は若干冗長になるため、構成をマージする関数に抽象化できます。
// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
preProcessor,
].filter(Boolean);
};
……
rules:[
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: getStyleLoaders(),
},
{
test: /\.less$/,
use: getStyleLoaders("less-loader"),
},
{
test: /\.s[ac]ss$/,
use: getStyleLoaders("sass-loader"),
},
]
3. 互換性の制御: package.json ファイルにbrowserslist を追加して、スタイルの互換性の範囲を制御できます。
{
// 其他省略
"browserslist": ["last 2 version", "> 1%", "not dead"]
}
3. 次のコマンドを実行します。npm run build
CSS圧縮
1. パッケージをダウンロードします。npm i css-minimizer-webpack-plugin -D
2. webpack.prod.js を構成します。
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
plugins: [
// css压缩
new CssMinimizerPlugin(),
],
3. 次のコマンドを実行します。npm run build
デフォルトの実稼働モード (html 圧縮と js 圧縮) はすでに有効になっており、追加の構成は必要ありません。