WebpackのVue使用、Webpackを使用して対応する問題を解決

その他 2020-09-18 14:21:18 訪問数: null

Vue.js - Webpack

Webページで参照される一般的な静的リソースは何ですか？

  • JS
    • .js .jsx .coffee .ts（TypeScript C＃言語）
  • CSS
    • .css .less .sass .scss
  • 画像
    • .jpg .png .gif .bmp .svg
  • フォントファイル（フォント）
    • .svg .ttf .eot .woff .woff2
  • テンプレートファイル
    • .ejs .jade .vue [これは、webpackでコンポーネントを定義する方法です。これを使用することをお勧めします]

Webページに静的リソースがさらに導入された場合はどうなりますか？？？

  1. 多くの二次リクエストを開始する必要があるため、Webページの読み込みが遅くなります。
  2. 複雑な依存関係に対処するには

上記の2つの問題を解決する方法

  1. マージ、圧縮、スプライト、画像のBase64エンコーディング
  2. 以前に学習したrequireJSを使用するか、webpackを使用してパッケージ間の複雑な依存関係を解決できます。

Webpackとは何ですか？

webpackはフロントエンドプロジェクト構築ツールであり、Node.jsに基づいて開発されたフロントエンドツールです。

上記の2つのソリューションを完全に実装する方法

  1. Gulpの使用はタスクタスクに基づいています。
  2. Webpackの使用はプロジェクト全体に基づいています。
  • フロントエンドの自動構築ツールであるwebpackを使用すると、リソースの統合、パッケージ化、圧縮、混乱などの多くの機能を完全に実現できます。
  • 公式ウェブサイトの写真に従って、ウェブパックのパッケージングプロセスを紹介します
  • webpack中国ネットワーク

Webpackをインストールする2つの方法

  1. 実行npm i webpack -gグローバルので、あなたはWebPACKのグローバルを使用することができますWebPACKのインストールするコマンドを
  2. プロジェクトのルートディレクトリnpm i webpack --save-devでプロジェクトの依存関係に対してインストールを実行します。

インターレースされた色の変化のリストをパッケージ化して構築するためのwebpackの予備的な使用

  1. npm init初期プロジェクトを実行し、npmを使用してプロジェクト内の依存パッケージを管理します
  2. プロジェクトの基本的なディレクトリ構造を作成する
  3. cnpm i jquery --savejqueryライブラリを使用してインストールする
  4. main.js各行の色を変更するためのコードロジックを作成して記述します。
// 导入jquery类库
import $ from 'jquery'

// 设置偶数行背景色，索引从0开始，0是偶数
$('#list li:even').css('backgroundColor','lightblue');
// 设置奇数行背景色
$('#list li:odd').css('backgroundColor','pink');
  1. main.jsブラウザーはimportこの高度なJS構文を認識せず、webpackで処理する必要があるため、ページで直接参照するとエラーが報告されます。デフォルトでは、webpackはこの高度な構文を下位レベルのブラウザーが認識できる構文に変換します。
  2. webpack 入口文件路径 输出文件路径ペアmain.js処理を実行します。
webpack src/js/main.js dist/bundle.js

webpackの構成ファイルを使用してパッケージコマンドを簡略化する

  1. プロジェクトのルートディレクトリに作成webpack.config.js
  2. webpackは、webpackコマンドを実行するときにエントリファイルと出力ファイルのパスを指定する必要があるため、webpack.config.js次の2つのパスを構成する必要があります。
// 导入处理路径的模块
var path = require('path');

// 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
module.exports = {
    
    
	entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
        output: {
    
     // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
    }
}

リアルタイムのパッケージングとWebpackの構築を実現

  1. コードを再変更するたびに、手動でwebpackのパッケージ化コマンドを実行する必要があるため、これはより面倒なのでwebpack-dev-server、コードのリアルタイムのパッケージ化とコンパイルを実現するために使用されます。コードが変更されると、パッケージ化と構築が自動的に実行されます。
  2. cnpm i webpack-dev-server --save-dev開発依存関係へのインストールを実行する
  3. インストールが完了したら、コマンドラインで直接実行しwebpack-dev-serverてパッケージ化し、エラーが報告されていることを確認します。現時点package.jsonでは、ファイル内の指示を使用してwebpack-dev-serverコマンドを実行する必要があります。scriptsノードの下に"dev": "webpack-dev-server"指示を追加し、リアルタイムのパッケージングが可能であることがわかりますが、distディレクトリにはありません。bundle.jsファイルを生成します。これはwebpack-dev-server、パッケージ化されたファイルがメモリに配置されるためです
  • bundle.jsメモリに置くことの利点は、リアルタイムでパッケージ化およびコンパイルする必要があるため、メモリ内で非常に高速になることです。
  • 現時点で、webpack-dev-serverによって開始されたhttp://localhost:8080/Webサイトにアクセスしたところ、それがフォルダーパネルであることがわかりました。インデックスのホームページを開くには、srcディレクトリの下をクリックする必要があります。現時点では、bundle.jsファイルを参照できず、index.htmlを変更する必要がありますスクリプトのsrc属性は次のとおりです。<script src="../bundle.js"></script>
  • するためにはhttp://localhost:8080/、直接訪問し、インデックスのホームページにアクセスし、使用することができ--contentBase src、スタートアップのルートディレクトリを指定するには、devコマンドを変更するためのコマンドを：
"dev": "webpack-dev-server --contentBase src"

同時に、インデックスページのスクリプトのsrc属性を次のように変更します。<script src="bundle.js"></script>

使用html-webpack-pluginスプラッシュページを設定するには、プラグインを

--contentBase命令を使用するプロセスは煩雑であるため、起動ディレクトリを指定する必要があり、index.htmlのスクリプトタグのsrc属性も変更する必要があるため、html-webpack-pluginプラグインを使用して起動ページを構成することをお勧めします。

  1. cnpm i html-webpack-plugin --save-dev開発依存関係へのインストールを実行する
  2. webpack.config.js次のように構成ファイルを変更します。
// 导入处理路径的模块
var path = require('path');
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    
    
    entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
    output: {
    
     // 配置输出选项
        path: path.resolve(__dirname, 'dist'), // 配置输出的路径
        filename: 'bundle.js' // 配置输出的文件名
    },
    plugins:[ // 添加plugins节点配置插件
        new htmlWebpackPlugin({
    
    
            template:path.resolve(__dirname, 'src/index.html'),//模板路径
            filename:'index.html'//自动生成的HTML文件的名称
        })
    ]
}
  1. ノードの開発手順の変更package.jsonはscript次のとおりです。
"dev": "webpack-dev-server"
  1. html-webpack-pluginプラグインがbundle.jsをindex.htmlページに自動的に挿入するため、index.htmlのスクリプトタグをコメント化します。

ブラウザの自動オープン、ホットアップデート、ブラウザのデフォルトポート番号の設定を実現

注：JSではホットアップデートは明らかではありません。しばらくすると、CSSからホットアップデートを導入できます。

方法1：

  • 変更されたpackage.jsonスクリプトノードは次のとおりです。--openつまり、ブラウザーは自動的に開か--port 4321れ、開かれたポート番号は4321です。--hotつまり、ブラウザーのホットアップデートが有効になっています。
"dev": "webpack-dev-server --hot --port 4321 --open"

方法2：

  1. 次のようにwebpack.config.jsファイルを変更し、devServerノードを追加します。
devServer:{
    
    
        hot:true,
        open:true,
        port:4321
    }
  1. 頭にwebpackモジュールを導入する：
var webpack = require('webpack');
  1. pluginsノードの下に追加：
new webpack.HotModuleReplacementPlugin()

webpackを使用してcssファイルをパッケージ化する

  1. 走るcnpm i style-loader css-loader --save-dev
  2. webpack.config.jsこの構成ファイルを変更します。
module: {
    
     // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            {
    
     test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
        ]
    }
  1. 注：一致したファイルのuse処理に使用されるモジュールを示しtestます。use関連するローダーモジュールの呼び出しシーケンスが後ろから前に呼び出されます。

webpackを使用してより少ないファイルをパッケージ化する

  1. 走るcnpm i less-loader less -D
  2. webpack.config.jsこの構成ファイルを変更します。
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

webpackを使用してsassファイルをパッケージ化する

  1. 走るcnpm i sass-loader node-sass --save-dev
  2. さらにwebpack.config.js、sassファイルローダーモジュールの処理：
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

cssでパスを処理するためにwebpackを使用する

  1. 走るcnpm i url-loader file-loader --save-dev
  2. さらにwebpack.config.js、パスローダーモジュールのURLの処理：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
  1. limitbase64エンコードする画像のサイズを指定できます。指定したバイト（バイト）より小さい画像のみがbase64エンコードされます。
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

babelを使用して高度なJS構文を処理する

  1. cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-devbabelの関連ローダーパッケージを実行してインストールします。
  2. cnpm i babel-preset-es2015 babel-preset-stage-0 --save-devバベル変換をインストールするための構文を実行する
  3. でwebpack.config.js注意しなければならない、関連するモジュールローダを、追加我々がすべきことであるnode_modules項目を除外するために、フォルダを追加します。
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
  1. プロジェクトのルートディレクトリに.babelrcファイルを追加し、構成ファイルを次のように変更します。
{
    
    
    "presets":["es2015", "stage-0"],
    "plugins":["transform-runtime"]
}
  1. 注：文法プラグインをbabel-preset-es2015更新してbabel-preset-env、ES関連のすべての文法を含めることができます。

おすすめ

転載: blog.csdn.net/qq_43562262/article/details/105751950
おすすめ
ランキング
Huaxia ERP にユーザー名とパスワードに依存する脆弱性が漏洩 (CNVD-2020-63964)
How to perform image recognition and face comparison in Vue
Linuxの意味2＞&1
端末装置とTTY、chvt、startxとコマンド
）（pandas.read_csvのdate_parserパラメータを利用する方法
プロジェクト設定はドメイン間でアクセス可能
SpringBoot2.xの基本：設定ファイルの読み込み順序と優先度のオーバーライド
Kubernetesシステムセキュリティ - アクセス制御
なぜダイハツAPPは、招待コード18818128に登録しました
フロントエンドが習得する必要があるネットワークの知識
アーカイブ
もっと
2024-05-21(36)
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)

コードワールド

© 2018 codetd.com