ホームページ > 記事 > ウェブフロントエンド > Webpack のパッケージ化プロセスを簡単に理解する
Webpack のパッケージ化プロセスを簡単に理解する
- WBOY転載
- 2022-08-09 09:52:061487ブラウズ
この記事では、javascript に関する関連知識を提供します。主に Webpack パッケージ化プロセスに関連する問題を紹介します。Webpack は、最新の JavaScript アプリケーション用の静的モジュール パッケージ化ツールです。以下を見てみましょう。それは誰にとっても役立つでしょう。
[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]
webpack : 最新の JavaScript アプリケーション用の 静的モジュール パッケージング ツールです。 Webpack がアプリケーションを処理するとき、内部で 1 つ以上のエントリ ポイントから依存関係グラフを構築し、プロジェクトに必要なすべてのモジュールを 1 つ以上の バンドル に結合します。これらはすべて静的リソースであり、コンテンツを表示するために使用されます。 。
WebPack はモジュール パッケージャーとみなすことができます。WebPack が行うことは、プロジェクトの構造を分析し、ブラウザーが直接実行できない JavaScript モジュールやその他の拡張言語 (Sass、TypeScript など) を見つけることです。ブラウザで使用できる適切な形式に変換してパッケージ化します。 3.0 の登場後、Webpack はプロジェクトの最適化の責任も負いました。
この段落には 3 つの重要なポイントがあります:
パッケージ化: サーバーの負荷を軽減し、ダウンロード帯域幅を軽減するために、複数の Javascript ファイルを 1 つのファイルにパッケージ化できます。
変換: ブラウザがスムーズに動作できるように、拡張言語を通常の JavaScript に変換します。
最適化: フロントエンドがますます複雑になるにつれて、パフォーマンスにも問題が発生します。WebPack もパフォーマンスの最適化と改善の責任を負い始めています
1. 新しいプロジェクトを作成し、
npm init
2. webpack と webpack-cil をグローバルにインストールします
npm install -g webpack npm install -g webpack-cil
3. webpack のローカル バージョンを使用できるように、プロジェクトの依存関係に webpack をインストールします。
npm install webpack -save-dev npm install webpack-cil -save-dev
4. 最も外側の webpack.config.js を作成し、デフォルト設定を変更します
機能: 便宜上、パッケージ化するたびにディレクトリ アドレスを入力する必要はなく、直接 Webpack するだけです
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js', // 指定打包入口文件
output: {
filename: 'index.js', // 指定打包输出文件名
path: path.resolve(__dirname, './public'), // 指定打包输出路径
},
module: { // 对模块的处理逻辑
rules: [ // 一系列的加载器的处理逻辑
{
test: /\.css$/, // 正则 匹配到文件后缀
use: [
'style-loader',
'css-loader',
], // 用此加载器处理匹配到的文件
exclude: [ // 排除此文件夹下的文件
path.resolve(__dirname, './node_modules')
]
}
],
},
resolve: {
extensions: ['.js', '.json', '.jsx', '.css'] // 自动补全识别后缀
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
removeAttributeQuotes: true,
},
hash: true,
}),
new webpack.EnvironmentPlugin(
{
NODE_ENV: 'development',
TEST: 'true',
}
),
new CopyPlugin({
patterns: [
{from: path.resolve(__dirname, './src/index.css'), to: path.resolve(__dirname, './public')},
],
}),
],
// 配置webpack服务
devServer: {
port: 8000, // 启动服务监听端口
host: 'localhost', // 可以通过localhost访问
open: true, // 自动打开浏览器
hot: true, // 启动热更新
},
};
5. HtmlWebpackPlugin をインストールします
このプラグインは HTML5 ファイルを生成し、本文で script タグを使用して、Webpack で生成されたすべてのバンドルを導入します。プラグインを Webpack 設定に追加するだけです
npm install --save-dev html-webpack-plugin
6. CopyWebpackPluginをインストールします
このプラグインは、必要なファイルをパッケージ化し、必要な場所にコピーします。このプラグインをインストールした理由は、パッケージをパッケージ化した後、CSS が正常にパッケージ化されなかったためです。その後、さまざまな方法を試しましたが成功しませんでした。これを手動で実行して、CSS パッケージを過去にコピーすることしかできませんでした。
npm install copy-webpack-plugin --save-dev // 安装
// from と to を使用して、フォームの場所にあるファイルを to 場所にコピーします
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{ from: "source", to: "dest" },
{ from: "other", to: "public" },
],
}),
],
}; // webpack.config.js
7. 2 つのパッケージ化方法
webpack --mode development // 开发模式 不压缩 webpack --mode production // 生产模式 压缩
8. webpack-dev-server をインストールします
npm install --save-dev webpack webpack-dev-server
const Webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
9. パッケージ化後、プロジェクトを開始します:
"scripts": {
"test": "mocha",
"start": "webpack-dev-server",
"dev": "webpack --mode development"
},// 在package.json 里面进行配置
// 然后执行
npm run start // 项目启动&热更新
npm run dev // 再次打包
npm run test // 执行测试
[関連する推奨事項: javascriptビデオ チュートリアル 、Web フロント エンド ]
以上がWebpack のパッケージ化プロセスを簡単に理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。