html-webpack-plugin をインストールして構成する

webpackのローダーについて

css ファイルのパッケージ化と処理

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

URL 関連ファイルをスタイルシートにパッケージ化する

js で高度な構文を処理する

プロジェクトリリースについて

ウェブパックを知る

初期のフロントエンド開発では、HTML + CSS + JavaScript を使用できます. これらをブラウザーに投げ込むと、ブラウザーは Web ページを表示します.

後期には、フロントエンドをより速く開発するために、DOM を操作するための jquery、css を操作するための Less など、多くのライブラリが生成されました。それを知りません、そしてそれは学びませんでした。

現時点では、これらの言語をブラウザに「翻訳」するツールをいくつか使用する必要があります. 1 つまたは 2 つでも構いません. 小さなツールが多すぎると、メンテナンスが面倒になるだけでなく、操作も面倒になります. このときその時、webpackが誕生しました。これらのコンパイルガジェットを一元的に管理するには、webpack を使用します。これは、大きなツールが一連の小さなツールを管理し、大きなツールのみを管理する必要があると理解できます。

Webpack は、フロントエンドアセットおよび静的モジュールバンドラーのビルドツールです。圧縮、マージ、および互換性の問題を提供します

webpackの基本的な使い方

必要がない場合は、関連する構成を自動的に生成するためのスクリプトフレームがあります. ここでは、主にプロジェクトの作成プロセスと webpack を体験します。

1. 空のプロジェクトフォルダを作成します ---完全な英語名、ここでは名前は Demo です

2. 現在のファイルのターミナルに入り、npm init -y を実行してパッケージ管理構成ファイルを初期化します.このとき、空のフォルダーにpackage.jsonファイルが自動的に生成されます.

[npm が何のコマンドかわかりませんが、それは問題ではありません。まず node.js について学ぶことができます。node.js は主に、JS 言語を解析するためのブラウザーのエンジンを分離し、ブラウザーなしで JS を実行できるようにします。npm コマンドは node.js に統合されており、主にノードプラグインの管理 (インストール、アンインストール、依存関係の管理などを含む) に使用されます。】

3. プロジェクトフォルダーに新しい src フォルダーを作成し、その中に新しい index.html ホームページと index.js スクリプトファイルを作成します。

4. htmlファイルを初期化 [vscodeのショートカットキー(!+タブ)]、複数のリストなど関連する構造を書く

<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
        <li>这是第9个li</li>
    </ul>
</body>

5.現在のプロジェクトのターミナルで npm install jquery -S を実行して、ページ構造をすばやく操作するための jquery をダウンロードします。[-S は --save の略で、package.json ファイルの「dependencies」配下にパッケージ情報を記述]

6. index.jsファイルで、import $ from 'jquery' を介してjquery ライブラリをインポートし [' ' 番号を忘れずに持ってきてください]、シングルリストとダブルリストのインターレースされた色の変化を実現するなど、関連する操作を記述します。

import $ from 'jquery'

$(function(){
    $('li:odd').css("background-color","red")
    $('li:even').css('background-color','pink')
})

7. このとき、ブラウザが jquery 構文を認識できないため、 html の head タグに <script src="./index.js"> </script>をインポートして実行すると問題が発生します。したがって、リストの形式は変更されていません。

この問題を解決するには、webpack を使用します。

8. webpack をインストールし、プロジェクトターミナルで次のコマンドを実行して、webpack 関連のパッケージファイルをインストールします。

npm install [email protected] [email protected] -D

-D package.json ファイルの「devDependencies」の下にファイルを書き込みます

-S と -D の違いは、一方は開発でのみ使用され、プロジェクトが正式に開始されたときには存在しないことです。

9. プロジェクトのルートディレクトリで、 webpack.config.jsという名前の構成ファイルを作成し、次の構成を初期化します。

module.exports = {
	mode: 'development'   
}
//mode 用来构建模式的可选值有两个
// 1.development  开发环境，不会对打包生成的文件进行代码压缩和性能优化，且打包速度快，
//   适合在开发阶段使用。
// 2.production   生产环境，会对打包生成的文件进行代码压缩和性能优化，且打包速度很慢，
//   仅适合在项目发布阶段使用。

webpack.config.js は webpack の構成ファイルであり、webpack は実際にパッケージ化およびビルドを開始する前にこの構成ファイルを読み取り、指定された構成に基づいてプロジェクトをパッケージ化します。

10. package.json ファイルの scripts ノードの下にスクリプトを追加します。

"scripts": {
    "dev": "webpack"
}
//dev只是个名称，可以更具自己的喜好更改

11.プロジェクトターミナルでnpm run devを実行します。

webpack のデフォルトのパッケージングエントリファイルは src の下の index.js ファイルであり、デフォルトの出力ファイルパスは自動生成された dist の下の main.js ファイルです。

12. html の <script> 内の src ファイルのアドレスを変更、<script src="../dist/main.js"></script>

13.この時点で再度実行すると、成功したことがわかります。

補充する

npm run devを実行すると、まず webpack.config.jsの構成ファイルを読み込んでから webpack を実行するという機能を利用して、さらに修正や調整を行うことができます。

webpack のデフォルトのパッケージングエントリはsrc->index.js であり、デフォルトの出力ファイルパスはdist->main.js です. webpack.config.js 構成ファイルのエントリノードを介してパッケージングエントリを指定し、出力ノードを介したパッケージング出口

const path =require('path') // 导入node.js中的专门操作路径的模块


module.exports={
    entry:path.join(__dirname,'./src/index.js'), //打包文件的入口文件的路径
    output:{
        path:path.join(__dirname,'./dist'),   //出口
        filename:'main2.js'},
    mode:'development'
}

dist フォルダーの下に新しい js ファイルが表示されます。

上記の段階で、 index.jsのコードを少し変更できる限り、変更されたページを表示するには再度実行する必要があることがわかります. 怠惰なプログラマーにとっては、この業界を直接あきらめる可能性があります. 非常に友好的ではありません. コードページを変更したらすぐに変更を確認したいと考えています。したがって、この問題を解決するために、webpack には 2 つのプラグインが用意されています。webpack-dev-serverとhtml-webpack-plugin をダウンロードして設定するだけです。

webpack-dev-serverをインストールして構成する

ダウンロード: npm install webpack-dev-server -D [ここに @ で指定されたバージョンはなく、デフォルトで最新バージョンがインストールされます。資格のあるプログラマーは、最新バージョンに追いつき、起こりうる問題を解決する必要があります]

構成: package.jsonの script コマンドを変更します--> scripts [ここで名前が変更され、dev が test に変更されますが、実際には効果はありません]

再実行: npm run test

この時、ターミナルはそのまま終了せず待機状態ですが、 index.js内のコードを修正すれば、webpackのパッケージング操作は自動で行われます。

ただし、問題が発生します。変更に応じてページが変更されていないことがわかります。これは、vscode の開始方法がファイルプロトコルであり、http://localhost:8080/を介してアクセスする必要があるためです。

しかし、問題は再び発生し、アドレスを入力した後、ブラウザーは目的のインターフェイスにアクセスできなかっただけでなく、見事に 404 をスローしました。【なぜ習ったことと違うのか、ウザい】

npm run test が実行されているときのプロンプトを確認するために戻ってみましょう。何も表示されていないようです。. . . [これは、新しいバージョンによってもたらされた痛みかもしれません]。情報を検索すると、 webpack.config.jsで関連する設定を行う必要があることがわかりました。

module.exports={
    entry:path.join(__dirname,'./src/index.js'), //打包文件的入口文件的路径
    output:{
        path:path.join(__dirname,'./dist'),   //出口
        filename:'main.js'},
    mode:'development',
    
    devServer: {
        static:'./',//根目录，需要点击进入src才能查看
        //static:path.join(__dirname, 'src'),//可以直接访问到src页面，实现页面的实时查看。
        host: "localhost",
        port: 8080,
        hot: true,
    },
}

static:path.join(__dirname, 'src') を設定することで、src ページに直接アクセスし、ページのリアルタイム表示を実現できます。html-webpack-pluginをインストールする必要はありません。これは、新しいバージョンの利点である可能性があります。. .

補足【重要！! ! ] : npm run test は、ブラウザが webpack を介して認識できるテキストに js ファイルを書き換えます。webpack-dev-serverプラグインは、パッケージ化された js ファイルをメモリに直接保存するため、高速なパッケージングアクセスを提供できます [ディスク上ではアクセスできませんが、ブラウザの入力ファイル名で確認できます]。 we html ファイルの <script> タグを次のように変更する必要があります。そうしないと、以前のバージョンの js のパッケージファイルがまだ導入されているため、ページはそれに応じて変更されません。

html-webpack-plugin をインストールして構成する

ダウンロード: npm install html-webpack-plugin -D

プラグインを実現できる、これもインストールされています。. . 【興味のある方は独学でもOK】

webpackのローダーについて

デフォルトでは、webpack はサフィックス .js で終わるモジュールのみをパックして処理でき、.css ファイルなどの他のモジュールは処理できません.このとき、ローダーを呼び出して通常どおりパッケージ化する必要があります.

import './index.css' がindex.jsファイルにインポートされているが、ローダーが呼び出されていない場合、次のエラーが発生します。

css ファイルのパッケージ化と処理

1. npm i style-loader css-loader -Dを実行してプラグインをインストールします

2. webpack.config.jsファイルのmodule.exportsにルールmodule->rulesを追加します。

   module:{
        rules:[
            {test:/\.css$/,use: ['style-loader','css-loader']}
        ]
    }
//test表示要处理的文件类型，use表示使用的loader，有先后顺序，
//先经过css-loader处理再转交给style-loader处理,最终合并到js文件中

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

1. npm i less-loader less -Dを実行してプラグインをインストールします

2. webpack.config.jsファイルのmodule.exportsにルールmodule->rulesを追加します。

module:{
        rules:[
            {test:/\.less$/,use: ['style-loader','css-loader','less-loader']}
        ]
    }
//less-loader内部已经使用了less，无需再调用，注意调用顺序

URL 関連ファイルをスタイルシートにパッケージ化する

1. npm i url-loader file-loader -Dを実行してプラグインをインストールします

2. webpack.config.jsファイルのmodule.exportsにルールmodule->rulesを追加します。

module:{
        rules:[
            {test:/\.jpg|png|gif$/,use: 'url-loader?limit=4399'}
        ]
    }
//会将小于4399字节的图片转为base64格式，这样可以直接读取到图片，防止小图片频繁的进行请求

js で高度な構文を処理する

デコレーターの構文など、js の構文が高度すぎて webpack が理解できない場合は、ローダープラグインを使用してこの問題を解決できます。

1、npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D

2. webpack.config.jsファイルのmodule.exportsにルールmodule->rulesを追加します。

module:{
        rules:[
            {test:/\.js$/,use: 'babel-loader',exclude:'/node_modules/'}
        ]
    }
//只要处理自己写的js文件就行，像第三方库中的js文件，它们本身就会做兼容性的处理，不需要我们担心

3. babel を設定し、ルートディレクトリに新しい babel.config.js を作成します。

module.exports={
    "plugins": ["@babel/plugin-proposal-decorators"]
  }
//相当于插件的插件

プロジェクトリリースについて

新しいスクリプトを作成し、npm run buileを実行して、生成された js ファイルをメモリではなくローカルディスクに保存します。このとき、処理のために dist ファイルをバックエンドに渡すだけです。

 "scripts": {
    "test": "webpack serve ",
    "build": "webpack --mode production"
  },

ブラウザで問題のエラーを解決します。行番号が問題に対応していません

Webpack を使用する理由

ウェブパックを知る

webpackの基本的な使い方

1. 空のプロジェクトフォルダを作成します ---完全な英語名、ここでは名前は Demo です

2. 現在のファイルのターミナルに入り、npm init -y を実行してパッケージ管理構成ファイルを初期化します.このとき、空のフォルダーにpackage.jsonファイルが自動的に生成されます.

3. プロジェクトフォルダーに新しい src フォルダーを作成し、その中に新しい index.html ホームページと index.js スクリプトファイルを作成します。

4. htmlファイルを初期化 [vscodeのショートカットキー(!+タブ)]、複数のリストなど関連する構造を書く

5.現在のプロジェクトのターミナルで npm install jquery -S を実行して、ページ構造をすばやく操作するための jquery をダウンロードします。[-S は --save の略で、package.json ファイルの「dependencies」配下にパッケージ情報を記述]

7. このとき、ブラウザが jquery 構文を認識できないため、 html の head タグに <script src="./index.js"> </script>をインポートして実行すると問題が発生します。したがって、リストの形式は変更されていません。

8. webpack をインストールし、プロジェクトターミナルで次のコマンドを実行して、webpack 関連のパッケージファイルをインストールします。

9. プロジェクトのルートディレクトリで、 webpack.config.jsという名前の構成ファイルを作成し、次の構成を初期化します。

10. package.json ファイルの scripts ノードの下にスクリプトを追加します。

11.プロジェクトターミナルでnpm run devを実行します。

12. html の <script> 内の src ファイルのアドレスを変更、<script src="../dist/main.js"></script>

13.この時点で再度実行すると、成功したことがわかります。

補充する

webpack-dev-serverをインストールして構成する

html-webpack-plugin をインストールして構成する

webpackのローダーについて

css ファイルのパッケージ化と処理

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

URL 関連ファイルをスタイルシートにパッケージ化する

js で高度な構文を処理する

プロジェクトリリースについて

おすすめ

Webpack を使用する理由

ウェブパックを知る

webpackの基本的な使い方

1. 空のプロジェクト フォルダを作成します ---完全な英語名、ここでは名前は Demo です

2. 現在のファイルのターミナルに入り、npm init -y を実行してパッケージ管理構成ファイルを初期化します.このとき、空のフォルダーにpackage.jsonファイルが自動的に生成されます.

3. プロジェクト フォルダーに新しい src フォルダーを作成し、その中に新しい index.html ホームページと index.js スクリプト ファイルを作成します。

4. htmlファイルを初期化 [vscodeのショートカットキー(!+タブ)]、複数のリストなど関連する構造を書く

5.現在のプロジェクトのターミナルで npm install jquery -S を実行して、ページ構造をすばやく操作するための jquery をダウンロードします。[-S は --save の略で、package.json ファイルの「dependencies」配下にパッケージ情報を記述]

7. このとき、ブラウザが jquery 構文を認識できないため、 html の head タグに <script src="./index.js"> </script>をインポートして実行すると問題が発生します。したがって、リストの形式は変更されていません。

8. webpack をインストールし、プロジェクト ターミナルで次のコマンドを実行して、webpack 関連のパッケージ ファイルをインストールします。

9. プロジェクトのルート ディレクトリで、 webpack.config.jsという名前の構成ファイルを作成し、次の構成を初期化します。

10. package.json ファイルの scripts ノードの下にスクリプトを追加します。

11.プロジェクト ターミナルでnpm run devを実行します。

12. html の <script> 内の src ファイルのアドレスを変更、<script src="../dist/main.js"></script>

13.この時点で再度実行すると、成功したことがわかります。

補充する

webpack-dev-serverをインストールして構成する

html-webpack-plugin をインストールして構成する

webpackのローダーについて

css ファイルのパッケージ化と処理

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

URL 関連ファイルをスタイル シートにパッケージ化する

js で高度な構文を処理する

プロジェクトリリースについて

おすすめ

1. 空のプロジェクトフォルダを作成します ---完全な英語名、ここでは名前は Demo です

3. プロジェクトフォルダーに新しい src フォルダーを作成し、その中に新しい index.html ホームページと index.js スクリプトファイルを作成します。

8. webpack をインストールし、プロジェクトターミナルで次のコマンドを実行して、webpack 関連のパッケージファイルをインストールします。

9. プロジェクトのルートディレクトリで、 webpack.config.jsという名前の構成ファイルを作成し、次の構成を初期化します。

11.プロジェクトターミナルでnpm run devを実行します。

URL 関連ファイルをスタイルシートにパッケージ化する