目次
1. ngx-build-plus は追加の構成を作成します
1. CLI を使用して新しい Angular プロジェクトを作成します
三、使用webpack把第三方库模块分离 - optimization + splitChunks
1. 默认配置:
2.分离第三方库
3.分离工具函数
4.第三方库合并打包并重命名
5.SplitChunks插件配置选项
四、HtmlWebpackPlugin
1.安装
2.基本用法
3.HtmlWebpackPlugin插件配置选项
ホームページ ウェブフロントエンド jsチュートリアル Angular10 で Webpack パッケージを構成するにはどうすればよいですか?手法の紹介

Angular10 で Webpack パッケージを構成するにはどうすればよいですか?手法の紹介

Apr 12, 2021 am 10:36 AM
webpack

この記事では、Angular10 で Webpack パッケージ化を構成する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Angular10 で Webpack パッケージを構成するにはどうすればよいですか?手法の紹介

Angular プロジェクトでは、angular-cli を使用してパッケージ化されたプロジェクトを作成することをお勧めします。Angular はデフォルトで構成に役立ちます。 ただし、特別なニーズがある場合には、明らかに柔軟性が高くありません。たとえば、いくつかの大きなパッケージング ファイルを分割し、各パッケージング ファイルの構成を分析し、webpack のいくつかのパラメータをカスタマイズしたい場合、次のような方法がありません。始める。 多くのプロジェクトに共通する依存関係は、日付ライブラリ moment.js です。これにはロケールを使用する機能も含まれますが、バンドル全体のサイズが大幅に増加します。これらはすべて最適化する必要がある領域です。

1. ngx-build-plus は追加の構成を作成します


推奨されるツール ライブラリは次のとおりですngx-build-plus ではなく、多くのことを変更したり、既存のプロジェクトに統合したりできます。次に使い方を説明しますが、具体的な詳細についてはgithubにあるドキュメントを参照してください。公式ドキュメントには利用可能なバージョンは 9 としか記載されていませんが、Angular 10 も使用できます。

1. CLI を使用して新しい Angular プロジェクトを作成します

Angular10 プロジェクトを最初から構築します

2. ngx-build-plus を追加します: ng add ngx-build-plus

: projects フォルダー内の特定のサブプロジェクトに追加する場合は、次のようにしてください。 --project スイッチを使用してそれを指します: ng add ngx-build-plus --project Getting-started

Remark:このステップでは、Angular >= 7 および CLI >= 7 バージョンの NPM インストール パッケージを渡します。プロジェクトでカスタム ジェネレーターを使用して、angular.jsonngserve および ng build# # を更新します。 #。ただし、バージョン 6 ではインストールが成功しない可能性があります。この場合は、yarn ngx-build-plus --dev を直接追加し、angular.json 内の次の 2 つの場所を変更してください。 ファイル:

 "build": {
   - "builder": "@angular-devkit/build-angular:browser"
   + "builder": "ngx-build-plus:build"
   ...
 },
 "serve": {
  - "builder": "@angular-devkit/build-angular:dev-server"
   + "builder": "ngx-build-plus:dev-server"
   ...
 }
ログイン後にコピー
推奨される関連チュートリアル: "

angular チュートリアル"

3. ファイル

webpack.partial.js を作成し、次の内容を追加します(サブ) プロジェクトのルート ディレクトリ:
  const webpack = require('webpack');
  
  module.exports = {
      plugins: [
          new webpack.DefinePlugin({
              "VERSION": JSON.stringify("4711")
          })
      ]
  }
ログイン後にコピー

4.

app.component.ts でグローバル変数 VERSION を使用します:
  import { Component } from '@angular/core';
  
  declare const VERSION: string;
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      title = 'Version: ' + VERSION;
  }
ログイン後にコピー

5.

を使用します。 --extra-webpack -config アプリケーションを開始するための Webpack 構成の一部を指すスイッチ:
ng serve --extra-webpack-config webpack.partial.js -o
ログイン後にコピー

プロジェクトが CLI ベースのサブプロジェクトの場合は、その

-- project switch:

ng serve --project getting-started -o --extra-webpack-config webpack.partial.js
ログイン後にコピー

ヒント: このコマンド用の npm スクリプトの作成を検討してください。

6. Webpack 設定によって提供されるバージョンが表示されていることを確認してください。

印刷結果が表示された場合は、プロジェクトで Angular10 で Webpack パッケージを構成するにはどうすればよいですか?手法の紹介webpack.partial.js ファイルの構成が有効になったことを意味します。 .js には必要な機能が追加されていますが、筆者は主に 2 つの主要な部分に焦点を当てました。

パッケージ化されたファイルを分析するために BundleAnalyzerPlugin を追加します
  1. サードパーティ ライブラリ モジュールの分離最適化 SplitChunks、より大きなファイルを分割します
  2. 以下で説明します

2. webpack-bundle-analyzer パッケージ ファイル分析ツール

##1. インストール

#
$ yarn add  webpack-bundle-analyzer --dev
ログイン後にコピー

2. Configuration

webpack.partial.js

#3 の文 module.exports = webpackConfig の上に <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = {   plugins: [     new BundleAnalyzerPlugin({       analyzerMode: 'static',     }),     new webpack.DefinePlugin({       &quot;VERSION&quot;: JSON.stringify(&quot;4711&quot;)     })   ] }</pre><div class="contentsignin">ログイン後にコピー</div></div>## を追加します。

#サービスの開始:

実稼働環境の表示:npm run build --report

または通常のビルドでビューアを開始

開発環境ビュー:

webpack -p --progress または、通常の devServer サービスを開始してビューアを開始します!

4. 結果

5. このプラグインのデフォルト設定

Angular10 で Webpack パッケージを構成するにはどうすればよいですか?手法の紹介

new BundleAnalyzerPlugin({
      // openAnalyzer: true,
      // reportFilename: path.join(__dirname, 'report.html')
      //  可以是`server`,`static`或`disabled`。
      //  在`server`模式下,分析器将启动HTTP服务器来显示软件包报告。
      //  在“静态”模式下,会生成带有报告的单个HTML文件。
      //  在`disabled`模式下,你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
      analyzerMode: 'static',
      //  将在“服务器”模式下使用的主机启动HTTP服务器。
      // analyzerHost: '127.0.0.1',
      //  将在“服务器”模式下使用的端口启动HTTP服务器。
      // analyzerPort: 8888,
      //  路径捆绑,将在`static`模式下生成的报告文件。
      //  相对于捆绑输出目录。
      // reportFilename: 'report.html',
      //  模块大小默认显示在报告中。
      //  应该是`stat`,`parsed`或者`gzip`中的一个。
      //  有关更多信息,请参见“定义”一节。
      // defaultSizes: 'parsed',
      //  在默认浏览器中自动打开报告
      // openAnalyzer: true,
      //  如果为true,则Webpack Stats JSON文件将在bundle输出目录中生成
      // generateStatsFile: false,
      //  如果`generateStatsFile`为`true`,将会生成Webpack Stats JSON文件的名字。
      //  相对于捆绑输出目录。
      // statsFilename: 'stats.json',
      //  stats.toJson()方法的选项。
      //  例如,您可以使用`source:false`选项排除统计文件中模块的来源。
      //  在这里查看更多选项:https:  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
      // statsOptions: null,
      // logLevel: 'info' // 日志级别。可以是'信息','警告','错误'或'沉默'。
    }),
ログイン後にコピー

モジュール関数: ファイルをパッケージ化して圧縮した後、ファイルを表示できます。コンテンツを確認し、どのモジュールが最大のサイズを構成しているかを調べ、間違ったモジュールを見つけて最適化します。最も優れているのは、縮小バンドルをサポートしていることです。それらを解析して、バンドルされたモジュールの実際のサイズを取得します。 gzip 圧縮されたサイズも表示されます。

三、使用webpack把第三方库模块分离 - optimization + splitChunks


在 webpack4.x 中,我们使用 optimization.splitChunks 来分离公用的代码块。SplitChunks插件简单的来说就是Webpack中一个提取或分离代码的插件,主要作用是提取公共代码,防止代码被重复打包,拆分过大的js文件,合并零散的js文件。

这里说的分离,当然只是针对一些第三方库(一般来自 node_modules),以及我们自己定义的工具库(或公用方法)。

不知如何下手?首先,我们来看官网给的一份

1. 默认配置:

splitChunks: {
    chunks: "async",
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        },
    default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
}
ログイン後にコピー

接着,我们再来看下它们的含义:

  • chunks: 该属性值的数据类型可以是 字符串 或者 函数。如果是字符串,那它的值可能为 initial | async | all 三者之一。默认值的数据类型为 字符串,默认值为 async,但推荐用 all。它表示将哪种类型的模块分离成新文件。字符串参数值的作用分别如下:

    • initial:表示对异步引入的模块不处理
    • async:表示只处理异步模块
    • all:无论同步还是异步,都会处理
  • minSize: 该属性值的数据类型为数字。它表示将引用模块分离成新代码文件的最小体积,默认为 30000,单位为字节,即 30K(指min+gzip之前的体积)。这里的 30K 应该是最佳实践,因为如果引用模块小于 30K 就分离成一个新代码文件,那页面打开时,势必会多增加一个请求。

  • maxSize: 把提取出来的模块打包生成的文件大小不能超过maxSize值,如果超过了,要对其进行分割并打包生成新的文件。单位为字节,默认为0,表示不限制大小。

  • minChunks: 该属性值的数据类型为数字。它表示将引用模块如不同文件引用了多少次,才能分离生成新代码文件。默认值为 1

  • maxAsyncRequests: 该属性值的数据类型为数字,默认值为 5。它表示按需加载最大的并行请求数,针对异步。

  • maxInitialRequests: 该属性值的数据类型为数字,默认值为 3。它表示单个入口文件最大的并行请求数,针对同步。

  • automaticNameDelimiter: 该属性值的数据类型为字符串,默认值为。它表示分离后生成新代码文件名称的链接符,比如说 app1.js 和 app2.js 都引用了 utils.js 这个工具库,那么,最后打包后分离生成的公用文件名可能是 xxapp1~app2.js 这样的,即以 ~ 符号连接。

  • name: 该属性值的数据类型可以是 布尔值 或者 函数(返回值为字符串),其中布尔值得为 true,此时,分离文件后生成的文件名将基于 cacheGroups 和 automaticNameDelimiter。如果设置为 false,则不会进行模块分离。

  • cacheGroups: 该属性值的数据类型为对象,它的值可以继承 splitChunks.* 中的内容。如果 cacheGroups存在与 splitChunks.* 同名的属性,则 cacheGroups 的属性值则直接覆盖 splitChunks.* 中设置的值。

  • test: 该属性值的数据类型可以为 字符串 或 正则表达式,它规定了哪些文件目录的模块可以被分离生成新文件。

  • priority: 该属性值的数据类型可以为数字,默认值为 0。它表示打包分离文件的优先

  • reuseExistingChunk: 该属性值的数据类型可以为布尔值。它表示针对已经分离的模块,不再重新分离。

2.分离第三方库

要将第三方库分离出来,我们需要调整配置文件,设置 chunks: 'all',即表示让所有加载类型的模块在某些条件下都能打包。

3.分离工具函数

打包中,我们发现,工具函数模块(utils)的源码被分别打包到了两个文件中,这显然是不对。之所以出现这种情况,是因为我们设置了 minSize: 30000,即分离成独立文件的最小体积为 30K,而这里的 工具函数(utils.js)只有几KB,所以,没被分离成单独的文件。

4.第三方库合并打包并重命名

有的时候,我们希望将所有来自 node_modules 的第三方库都打包到同一个文件中。显然,上面的打包配置并没有满足这个条件。并且,我们还希望可以对打包后的文件名进行重命名。

要完成,只需要在 cacheGroups 设置 name 属性即可。这里,笔者还把项目中使用到的momenthandsontableangular库单独分离出来了。

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        moment: {
          name: 'moment',
          test: /[\\/]node_modules[\\/]moment[\\/]/,
          priority: -6						// 两个cacheGroup.priority相同时,先定义的会先命中
        },
        handsontable: {
          name: 'handsontable',
          test: /[\\/]node_modules[\\/]handsontable[\\/]/,
          priority: -7
        },
        angular: {
          name: 'angular',
          test: /[\\/]node_modules[\\/]@angular[\\/]/,
          priority: -9
        },
       vendors: {
          name: 'vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          name: 'default',
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
}
ログイン後にコピー

5.SplitChunks插件配置选项

  • chunks选项,决定要提取那些模块。

    默认是async:只提取异步加载的模块出来打包到一个文件中。 异步加载的模块:通过import('xxx')require(['xxx'],() =>{})加载的模块。

    initial:提取同步加载和异步加载模块,如果xxx在项目中异步加载了,也同步加载了,那么xxx这个模块会被提取两次,分别打包到不同的文件中。 同步加载的模块:通过 import xxxrequire('xxx')加载的模块。

    all:不管异步加载还是同步加载的模块都提取出来,打包到一个文件中。

  • minSize选项:规定被提取的模块在压缩前的大小最小值,单位为字节,默认为30000,只有超过了30000字节才会被提取。

  • maxSize选项:把提取出来的模块打包生成的文件大小不能超过maxSize值,如果超过了,要对其进行分割并打包生成新的文件。单位为字节,默认为0,表示不限制大小。

  • minChunks选项:表示要被提取的模块最小被引用次数,引用次数超过或等于minChunks值,才能被提取。

  • maxAsyncRequests选项:最大的按需(异步)加载次数,默认为 6。

  • maxInitialRequests选项:打包后的入口文件加载时,还能同时加载js文件的数量(包括入口文件),默认为4。

  • 先说一下优先级 maxInitialRequests / maxAsyncRequests maxSizeminSize。

  • automaticNameDelimiter选项:打包生成的js文件名的分割符,默认为~

  • name选项:打包生成js文件的名称。

  • cacheGroups选项,核心重点,配置提取模块的方案。里面每一项代表一个提取模块的方案。下面是cacheGroups每项中特有的选项,其余选项和外面一致,若cacheGroups每项中有,就按配置的,没有就使用外面配置的。

  • test选项:用来匹配要提取的模块的资源路径或名称。值是正则或函数。

  • priority选项:方案的优先级,值越大表示提取模块时优先采用此方案。默认值为0。

  • reuseExistingChunk选项:true/false。为true时,如果当前要提取的模块,在已经在打包生成的js文件中存在,则将重用该模块,而不是把当前要提取的模块打包生成新的js文件。

  • enforce选项:true/false。为true时,忽略minSizeminChunksmaxAsyncRequestsmaxInitialRequests外面选项

四、HtmlWebpackPlugin


HtmlWebpackPlugin简化了HTML文件的创建,以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件,这个插件有两个重要作用。

  1. 创建HTML页面文件到你的输出目录
  2. 将webpack打包后的chunk自动引入到这个HTML中

1.安装

npm install --save-dev html-webpack-plugin
ログイン後にコピー

使用yarn

yarn add --dev html-webpack-plugin
ログイン後にコピー

2.基本用法

该插件将为你生成一个 HTML5 文件, 其中包括使用 script 标签的 body 中的所有 webpack 包。 只需添加插件到你的 webpack 配置如下:

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      "VERSION": JSON.stringify("4711")
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',												 // 根据模板文件生成的html的文件名
      template: path.join(__dirname, 'src/index.html'), 
      chunksSortMode: 'manual',
      chunks: ['styles', 'runtime', 'polyfills', 'scripts', 'vendors', 'main']
    })
  ]
}
ログイン後にコピー

这将会产生一个包含以下内容的文件 dist/index.html

nbsp;html>


  <meta>
  <meta>
  <meta>
  <meta>
  <meta>
  <meta>
  <meta>
  <meta>
  <title>test</title>
  <base>
  <link>
  <link>


<app-root></app-root>
<div>
  <div>
    <div></div>
  </div>
</div>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>

ログイン後にコピー

如果你有多个 webpack 入口点, 他们都会在生成的HTML文件中的 script 标签内。

需要注意的是,默认angular-cli打包生成的入口文件也被配置成了index.html,所以我们需要更改angular.jaon文件中的配置。并且,由于Angular单页面应用的入口文件为main.ts 所以!chunks配置中,main 一定一定要放在最后,否则运行会出错,笔者因为没有放在最后找了一晚上的bug~~

Angular10 で Webpack パッケージを構成するにはどうすればよいですか?手法の紹介

改为:

Angular10 で Webpack パッケージを構成するにはどうすればよいですか?手法の紹介

3.HtmlWebpackPlugin插件配置选项

您可以将配置选项的哈希值传递给html-webpack-plugin。允许的值如下:

#名前タイプデフォルト説明#filename です。ここでサブディレクトリを指定できます (例: template テンプレートへの相対パスまたは絶対パス。デフォルトでは、(templateContenttemplate独自のテンプレートの作成」#templateParametersfalseExample# を参照してください。 publicPath {'ブロック', 'defer'}最新のブラウザでは、ページの起動を改善するためにノンブロッキング JavaScript の読み込み (`` タグの挿入を許可します。例: basefalse##minifytrue を参照してください。 ##{ブール値}falsetrueエラーの詳細は HTML ページに書き込まれますchunks#?##一部のブロックのみ (たとえば、単体テスト ブロックのみ) を追加できます{ブール値}falsetruelink
##title##{文字列} Webpack アプリ タイトル生成された HTML ドキュメントに使用する
{String} 'index.html' HTML を書き込むファイル。デフォルトは index.htmlassets/admin.html)
{String} `` webpacksrc/index.ejs (存在する場合)) が使用されます。詳細については、Documentation を参照してください。
##{string, Function, false} false の代わりに使用して、インライン テンプレートを提供できます。「 セクションをお読みください。
##{ブール値、オブジェクト、関数} テンプレートで使用されるパラメーターをオーバーライドできるようにします - inject
##{ブール値、文字列}true `true
{String,'auto'}'auto' スクリプトとリンク タグの publicPath #scriptLoading
##'blocking''defer') がサポートされています。パフォーマンス。 #ファビコン ##{文字列}
指定されたアイコン アイコン パスを出力 HTML meta { オブジェクト} に追加します。
{}metameta: {viewport: 'width=device-width、initial-scale=1、shrink-to-fit=no'} {オブジェクト、文字列、false}
インジェクションベース タグ。たとえば、base: "https://example.com/path/page.html {ブール値、オブジェクト}
mode'production' の場合、それ以外の場合false 出力を最小化するかどうか、およびその方法を制御します。詳細については、以下の Minify ハッシュ
はいの場合、true含まれるすべてのスクリプトと CSS ファイルに一意の webpack コンパイル ハッシュを追加します。これはキャッシュをクリアするのに役立ちます cache {ブール値}
ファイルを出力 showErrors {Boolean}## ファイルが変更された場合のみ #true
{?}
chunksSortMode ##{String, Function} auto 次の制御を許可しますHTML に含める前にブロックをどのように並べ替える必要があるか。許可される値は「none」です
excludeChunks {Array.<string>}</string> `` を使用すると、一部のチャンクをスキップできます (単体テスト ブロックを追加せずになど)
xhtml If
タグを自動終了タグとしてレンダリングします (XHTML 準拠)

最后奉上完整的webpack.partial.js

const webpack = require('webpack')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  externals: {        // 打包除外的文件
    echarts: 'echarts'
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      minSize: 20000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        moment: {
          name: 'moment',
          test: /[\\/]node_modules[\\/]moment[\\/]/,
          priority: -6
        },
        handsontable: {
          name: 'handsontable',
          test: /[\\/]node_modules[\\/]handsontable[\\/]/,
          priority: -7
        },
        angular: {
          name: 'angular',
          test: /[\\/]node_modules[\\/]@angular[\\/]/,
          priority: -9
        },
        vendors: {
          name: 'vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          name: 'default',
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  },
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
    }),
    new webpack.DefinePlugin({
      "VERSION": JSON.stringify("4711")
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.join(__dirname, 'src/index.html'),
      chunksSortMode: 'manual',
      chunks: ['styles', 'runtime', 'polyfills', 'scripts', 'vendors', 'main']      // 限定顺序,main.js必须在最后
    })
  ]
}
ログイン後にコピー

希望大家打包顺利,项目运行快快滴。

demo地址:
https://github.com/qinqing3761/webpack-build-demo

更多编程相关知识,请访问:编程入门!!

以上がAngular10 で Webpack パッケージを構成するにはどうすればよいですか?手法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

VUE3 入門チュートリアル: Webpack を使用したパッケージ化とビルド VUE3 入門チュートリアル: Webpack を使用したパッケージ化とビルド Jun 15, 2023 pm 06:17 PM

Vue は、インタラクティブで効率的な Web アプリケーションを迅速に構築するのに役立つ優れた JavaScript フレームワークです。 Vue3 は、多くの新機能が導入された Vue の最新バージョンです。 Webpack は現在最も人気のある JavaScript モジュール パッケージャーおよびビルド ツールの 1 つで、プロジェクト内のさまざまなリソースの管理に役立ちます。この記事では、Webpack を使用して Vue3 アプリケーションをパッケージ化してビルドする方法を紹介します。 1.Webpackをインストールする

vite と webpack の違いは何ですか vite と webpack の違いは何ですか Jan 11, 2023 pm 02:55 PM

相違点: 1. Webpack サーバーの起動速度は Vite より遅いですが、Vite は起動時にパッケージ化する必要がなく、モジュールの依存関係を解析してコンパイルする必要がないため、起動速度が非常に速くなります。 2. Vite ホット アップデートは webpack よりも高速です。Vite の HRM の観点から、特定のモジュールのコンテンツが変更された場合、ブラウザーにモジュールを再リクエストさせるだけです。 3. Vite は esbuild を使用して依存関係を事前構築しますが、webpack はノードに基づいています。 4. Vite のエコロジーは webpack ほど良くなく、ローダーとプラグインが十分に豊富ではありません。

モジュール開発に PHP と webpack を使用する方法 モジュール開発に PHP と webpack を使用する方法 May 11, 2023 pm 03:52 PM

Web 開発テクノロジーの継続的な発展に伴い、フロントエンドとバックエンドの分離とモジュール開発が広く普及する傾向になりました。 PHP は一般的に使用されるバックエンド言語です。モジュラー開発を行う場合、モジュールの管理とパッケージ化にいくつかのツールを使用する必要があります。Webpack は非常に使いやすいモジュラー パッケージング ツールです。この記事では、モジュール開発に PHP と webpack を使用する方法を紹介します。 1. モジュラー開発とは何ですか? モジュラー開発とは、プログラムを、それぞれが独自の機能を持つ独立したモジュールに分解することを指します。

vwebpack パッケージに使用できるファイルは何ですか? vwebpack パッケージに使用できるファイルは何ですか? Dec 20, 2022 pm 07:44 PM

vue では、webpack は js、css、ピクチャ、json、その他のファイルをブラウザで使用できる適切な形式にパッケージ化できます。webpack では、js、css、ピクチャ、json、その他のファイル タイプをモジュールとして使用できます。 Webpack のさまざまなモジュール リソースは、パッケージ化して 1 つ以上のパッケージにマージでき、パッケージ化プロセス中に、画像の圧縮、scss から css への変換、ES6 構文から ES5 への変換などのリソースを処理できます。 HTMLで認識されるファイルタイプ。

ウェブパックとは何ですか?仕組みの詳しい説明は? ウェブパックとは何ですか?仕組みの詳しい説明は? Oct 13, 2022 pm 07:36 PM

Webpack はモジュールのパッケージ化ツールです。さまざまな依存関係のモジュールを作成し、それらをすべて管理可能な出力ファイルにパッケージ化します。これは、単一ページ アプリケーション (今日の Web アプリケーションの事実上の標準) に特に役立ちます。

Webpack はどのように es6 モジュールを es5 モジュールに変換しますか? Webpack はどのように es6 モジュールを es5 モジュールに変換しますか? Oct 18, 2022 pm 03:48 PM

設定方法: 1. import メソッドを使用して ES6 コードをパッケージ化された js コード ファイルに配置します; 2. npm ツールを使用して babel-loader ツールをインストールします。構文は「npm install -D babel-loader @babel/core」です。 @babel/preset-env"; 3. babel ツールの構成ファイル「.babelrc」を作成し、トランスコーディング ルールを設定します。 4. webpack.config.js ファイルでパッケージ化ルールを構成します。

Spring Boot と Webpack を使用してフロントエンド プロジェクトとプラグイン システムを構築する Spring Boot と Webpack を使用してフロントエンド プロジェクトとプラグイン システムを構築する Jun 22, 2023 am 09:13 AM

最新の Web アプリケーションの複雑さが増すにつれて、優れたフロントエンド エンジニアリングとプラグイン システムを構築することがますます重要になっています。 Spring Boot と Webpack の人気により、これらはフロントエンド プロジェクトとプラグイン システムを構築するための完璧な組み合わせになりました。 SpringBoot は、最小限の構成要件で Java アプリケーションを作成する Java フレームワークです。自動構成などの多くの便利な機能を提供するため、開発者は Web アプリケーションをより迅速かつ簡単に構築および展開できます。 W

Laravel開発: Laravel MixとWebpackを使用してファイルサイズを最適化するには? Laravel開発: Laravel MixとWebpackを使用してファイルサイズを最適化するには? Jun 13, 2023 pm 04:44 PM

Laravel開発: LaravelMixとWebpackを使用してファイルサイズを最適化するには? Laravel は、開発者が Web アプリケーションを構築する際の生産性を高めるための多くの機能とツールを提供する、非常に人気のある PHP フレームワークです。その中でも、LaravelMix と Webpack は、ファイル サイズの最適化とパフォーマンスの向上に役立つ 2 つの強力なツールです。この記事では、LaravelMixとWebpackを使って最適化する方法を紹介します。

See all articles