vueプロジェクトがwebpackを使用してコードをパッケージ化する方法

I.概要

webpackとは

***モジュールパッカー：***プロジェクト構造を分析し、ブラウザーで直接実行できないJavaScriptモジュールやその他の拡張言語（Scss、TypeScriptなど）を見つけて、それらを変換してパッケージ化することです。ブラウザでの使用に適した形式です。

webpackを使用する理由

今がインターネット時代です。インターネットは私たちの生活に欠かせないものになっています。インターネット上には機能豊富な美しいページがたくさんあります。これらのページは、複雑なJavaScriptコードとさまざまな依存関係パッケージの組み合わせで構成されています。一緒に組み合わせる？一緒に組み合わせるのにどれくらいの労力がかかりますか？長い開発期間の後、複雑なワークフローを処理し、開発を容易にするために、多くの実用的な方法がフロントエンドに登場しました。

モジュール化により、複雑なプログラムを小さなファイルに絞り込むことができます
プリプロセッサは、Scss、less、その他のCSSを前処理でき
ます...

2.Weback使用プロセス

1.プロジェクトを作成します

これはプロジェクトを作成するためのコマンドです。もちろん、マウスの右ボタンに移動してプロジェクトを作成することもできます。

mkdir webpackDemo // 创建项目
cd webpackDemo // 进入项目
mkdir app // 在项目中创建app文件
mkdir common // 在项目中创建common文件
cd app // 进入app文件夹
touch app.js // 创建app.js文件
touch main.js // 创建main.js文件
cd .. //返回到webpackDemo项目根目录
cd common // 进入common文件
touch index.html // 创建index.html文件

** mkdir：**フォルダーを作成します
** cd…：**現在のディレクトリの親ディレクトリに戻ります
**タッチ：**ファイルを作成します
** app：**元のデータとこれから作成するJavaScriptモジュールを保存するために使用されます
**共通：**後でブラウザによって読み取られるファイル（jsファイルとwebpackパッケージによって生成されたindex.htmlファイルを含む）を保存するために使用されます

*ディレクトリ構造*

image.png

*基本コード*
index.htmlがメインの入り口です。ルートディレクトリを設定し、パッケージ化されたファイルをインポートする必要があります

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

app.jsは、CommonJS仕様に従ってこのモジュールを作成およびエクスポートしたモジュールです。ここでは、出力welcome to use webpackを例として取り上げます。

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "welcome to use webpack!";
  return greet;
}

main.jsは実際にはコンポーネントであり、その目的は、私たちが作成したいくつかのコードモジュールを返し、それらをページに挿入することです。

const greeter = require('./app.js');
document.querySelector("#root").appendChild(greeter());

2.インストール

Webpackをインストールするにはnpmを使用する必要があるため、インストールする前にまずノードをインストールする必要があります。
最初のステップは、プロジェクトのルートディレクトリでnpm init初期化してpackage.jsonファイルを生成することです。

npm init

初期化プロセス中に多くのプロンプトが表示されます。非公式プロジェクトで直接Enterキーを押して調整できる場合、括弧はすべてデフォルトです。正式プロジェクトでは、状況に応じて各ステップを入力できます。

name: (webpackDemo) // 项目名称
version: (1.0.0) // 版本号
description: // 项目的描述
entry point: (index.js) // 入口文件
test command: // 测试命令
git repository: // git仓库
keywords: // 关键字
author: // 作者创始人
 license: (ISC) //许可:(ISC)
About to write to C:\Users\Administrator\Desktop\webpackDemo\package.json:

{
    
    
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes) // 这里直接输入yes就可以了

2番目のステップはwebpackをインストールします

npm install webpack -g // 全局安装
npm install webpack --save-dev // 项目内安装

最新バージョンをインストールしたくない場合は、webpackの後に@を追加し、インストールするバージョン番号を入力する必要があります。もちろん、最新バージョンをインストールするときに@version番号を追加することも@version番号を追加しないこともできます。。

npm install webpack@xx -g
npm install webpack@xx --save-dev

webpackにはwebpack2とwebpack4の2つのバージョンがあり、これら2つのバージョンのインストール構成は異なります。
まず、今回
インストールしたwebpack2のバージョンが3.5.6であることを確認し、次のコマンドを実行します。

npm install [email protected] --save-dev

次に、作成したpackage.jsonファイルを確認します。これは、構成したばかりのファイルです。

{
    
    
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    
    
    "webpack": "^3.5.6"
  }
}

次に、
追加でインストールする必要があるwebpack4webpack4バージョンを確認しますwebpack-cli

npm install webpack@4 --save-dev
npm install webpack@4 webpack-cli --save-dev

次に、構成ファイルを見てください

{
    
    
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    
    
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3",
  }
}

注：package.jsonファイルにコメントを含めることはできません。実行時にコメントを削除してください。

3番目のステップは、 Webpackを
使用して、ターミナルで使用できるwebpackをパッケージ化することです。基本的な使用法は次のとおりです。

// webpack2的命令
node_modules/.bin/webpack app/main.js common/index.js 
// webpack4的命令
node_modules/.bin/webpack app/main.js -o common/index.js

** app / main.js：**はエントリファイルのパスです。この記事では、上記のmain.jsのパスです。
** common / index.js：**は、パッケージ化されたファイルのストレージパスです

**注：**は、webpack2パッケージングコマンドが実行された後の非グローバルインストール状況
です。

image.png

webpack4 packageingコマンドの実行後、webpackがwebpack4
の最新バージョンの場合、webpack2 packageingコマンドを使用できません。webpack2commandを使用すると、次のようにエラーがパッケージングの失敗として報告されます。

image.png

**黄色の部分：** Webpack4は、開発環境または実稼働環境としてパッケージ化する必要があります。現在、どの環境であるかは指定されていないため、この警告が表示されます。
**赤い部分：** webpack4のパッケージングコマンドはwebpack2のパッケージングコマンドとは異なるため、webpack2のパッケージングコマンドを使用すると、パッケージングパスが見つからないというプロンプトが表示されます。

webpack4のpackagesコマンドを使用する場合、パッケージ化は次のようになります。

image.png

以下の黄色の警告はこの問題を解決します。
パッケージ化の結果から、webpackがmain.jsとapp、jsを同時にコンパイルし、パッケージ化が成功したことがわかります。エディターを開くと、次の結果が表示されます。

image.png

Webpack2パッケージファイル

image.png

webpack4パッケージファイル

image.png

次に、このページを見ていきます

image.png

非常に興奮していますか？すでにwelcome to use webpack!ページをパッケージ化して生成していますが、このメソッドはターミナルで複雑なコマンドを実行する必要があり、エラーが発生しやすいため、不便です。より便利な場合は、アップグレードされたバージョンを確認します。。ベール。

4番目のステップは、構成ファイルを介してwebpack.config.jswebpackを使用することです
。Webpackには他にも多くの高度な機能があります。これらの機能は実際にはコマンドラインモードで実装できますが、ターミナルで複雑な操作を実行するのは便利ではなく、エラーが発生しやすくなります。構成ファイルを定義する方法があります。この構成ファイルは実際には単純なJavaScriptモジュールであり、パッケージ関連のすべての情報をその中に入れることができます。
現在のプロジェクトのwebpackDemoフォルダーに新しいファイルを作成しwebpack.config.js、簡単な構成コードを記述します。現在の構成には、主に、パッケージ化されたファイルのエントリファイルパスとストレージパスが含まれます。

// webpack2的配置
module.exports = {
    
    
    entry:  __dirname + "/app/main.js", // 之前提到的唯一入口文件
    output: {
    
    
        path: __dirname + "/common", // 打包后的文件存放的地方
        filename: "index.js" // 打包后输出文件的文件名
    }
}
// webpack4的配置
module.exports = {
    
    
    // webpack4需要添加这个配置，development为开发环境，production为生产环境
    mode: "development",
    entry:  __dirname + "/app/main.js", // 之前提到的唯一入口文件
    output: {
    
    
        path: __dirname + "/common", // 打包后的文件存放的地方
        filename: "index.js" // 打包后输出文件的文件名
    }
}

注：「__ dirname」はnode.jsのグローバル変数であり、現在実行中のスクリプトが配置されているディレクトリを指します。
この設定を行った後、ファイルをパッケージ化するには、ターミナルでwebpack(全局情况下)或node_modules/.bin/webpack(非全局安装需使用)コマンドを実行するだけです。コマンドラインからメインエントリのパスとパッケージファイルを入力する必要はありません。このコマンドはwebpack.config.js、設定オプションを自動的に参照します。ファイル内。
例は次のとおりです。

image.png

node_modules/.bin/webpackターミナルに煩わしい設定ファイルのパスをたくさん入力する必要がないほど簡単なので、このコマンドをターミナルに入力する必要がない場合は簡単ですか？、そして見下ろし続けます。
より便利なパッケージング操作
上記の方法では、設定webpack.config.jsすればパッケージングパスコマンドを省略できますが、このようにコマンドを省略できるかどうかを考えますnode_modules/.bin/webpack。答えは「はい」ですが、このファイルでは構成されておらず、新しいファイル構成を作成する必要はありません。
Npmは、タスクの実行をガイドできます。npmを構成した後、コマンドラインで単純なnpm startコマンドを使用して、上記の少し面倒なコマンドを置き換えることができます。ではpackage.json、次のようにオブジェクトに関連する一連のスクリプトが提供されます。

{
    
    
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    
    
    "webpack": "^3.5.6"
  }
}

注：package.jsonのスクリプトは、コマンドの対応する場所を見つけるために特定の順序でインストールされます。ローカルnode_modules/.binパスはこの検索リストに含まれているため、Webpackのグローバルインストールでも部分インストールでも、次のことを行う必要はありません。前に指定した詳細パスを記述します。
npmのstartコマンドは特別なスクリプト名であり、コマンドラインでnpm startを使用して、対応するコマンドを実行できるという特徴があります。対応するスクリプト名がstartでない場合は、コマンドラインで実行する必要があります。、これを使用するにはnpm run {script name}、次のようにnpm run build、我々はコマンドライン上でそれを入力してくださいnpm start。次のように出力結果が何であるかを参照して、出力結果は次のとおりです。

image.png

これnpm startで、ファイルをパックするために使用するだけで済みます。webpackはそれ以上のものではないと思いますが、webpackを過小評価しないでください。その強力な機能を十分に活用するには、多くの設定が必要です。