Webpackを使い始めて、何ができるでしょうか？

序文

当初の意図：この記事では、Webpackについて、Webpackで何ができるのか、なぜそれを使用する必要があるのかについて説明します。私がまとめたメモをあなたと共有してください。間違いがある場合は指摘してください。気に入らない場合はスプレーしないでください。

群衆に適しています：フロントエンドの一次開発、大物は迂回します。

この記事ではWebpack4.xについて説明しますが、バージョンに注意してください。

Webpackを使用する理由

我々はシステムを開発するための伝統的な方法である前に、html、、 css、jsそれがすべてです。開発が完了した後、バックエンドの担当者に直接展開されます。もちろん、問題はありません。プロジェクトの要件が増え続けると、コードが増えるほど、保守が難しくなります。ファイルには数百行または数千行のコードが含まれ、内部のコードも複製されます。また、scriptラベルの依存関係の順序とコード。変数の汚染と依存関係の順序の問題を防ぐために、現時点では可変汚染の問題がモジュール化されています。現在、主流のパッケージツールはWebpack強力なコミュニティサポートとサポートEs Module、CommonJsおよびAMD標準化です。

Webpackとは

Webpackモジュールはパッケージ化されたツールです、あなたがすることができEs Module、CommonJsブラウザを実行することができ、コードに文法プロセスは、関連する依存ファイルはにパッケージ化jsファイル。

Webpackでできること

便利な開発に役立ち、ローカルでのサービスの構築、コード変更のホットアップデートとページ更新なし、依存ファイルのグローバルインジェクション、コードセグメンテーション、コード抽出、不要なコードの削除、環境変数の差別化、画像の最適化などを支援します。、強力なコミュニティプラグイン拡張機能は、プロジェクトの開発に役立ちます。

インストール

インストールWebpack環境も非常にシンプルです。通常、ローカルインストールをお勧めします。グローバルインストールは他のプロジェクトと競合する可能性があります。ローカルにインストールしてみてください。

cnpm i webpack@4 webpack-cli --save

上記のwebpack文法webpack-cliは、コマンドライン操作の実行コマンドです。

インストールが完了した後、webpack -vこのようなエラーを直接報告することはできません。これは、webpack環境がグローバルに検出されるためですが、ローカルにインストールしているnpx webpack -vため、これを使用するとプロジェクトでローカル検索が実行されます。

すぐに始めましょう

package.jsonファイルを初期化します

プロジェクトファイルの下でこのコマンドを実行し、対応する（最後まで入力してください）愚かな操作を入力します。

npm init

プロジェクト構造

|- /node_modules
|- /src
   |- index.js
   |- news.js
   |- index.css
|- index.html
|- webpack.config.js
|- package.json

エントリ

エントリーパッケージエントリーファイル、パッケージエントリーにはいくつかの形態がありますので、一つ一つ紹介していきましょう。

単一のエントリ

module.exports = {
    
    
    entry: "./src/index.js"
}

マルチエントリー

マルチエントリパッケージ。jsファイル名はオブジェクトのキー値です。

module.exports = {
    
    
    entry: {
    
    
        index: "./src/index.js",
        news: "./src/news.js"
    }
}

配列エントリ

entry配列オブジェクトを受け取る配列パッケージング。内部のパラメーターの最後の値のみが実際のパッケージングパスであり、他のパラメーターはパスファイルを最後のパラメーターにインポートします。

module.exports = {
    
    
    entry: ["./src/news.js", "./src/index.js"]
}

// 上面entry那种操作，等同于如下：
// index.js
require("news.js")

上記の例では、最後のパラメーターを除いて、他のすべての配列パラメーターが最後のパラメーターファイルにインポートされます。

出力

outputエントリファイルがある場合は、エクスポートファイルが必要です。

module.exports = {
    
    
    output: {
    
    
        path: __dirname + "/dist",
        filname: "app.js"
    }
}

filenameいくつかの名前のオプションがあります、それらを紹介させてください

[名前]エントリファイルの名前を使用します
[chunkhash]に依存する現在のファイルによって解析されるハッシュ値が生成され、最後にチャンクが生成され、ハッシュ値が生成されます
[contenthash]ファイルの内容が変わると、ハッシュ値が変わります
[id]チャンクIDを使用してファイル名を生成します
[ハッシュ]生成されたハッシュが異なるたびに、ファイル名としてハッシュを使用します

module.exports = {
    
    
    output: {
    
    
        path: __dirname + "/dist",
        filname: "[name][id][contenthash].js"
    }
}

ローダ

loaderjs上記の関連するものについてのみ説明しました。Webpackデフォルトでは、jsファイルのみを認識します。その後Webpack、パッケージ化以外のものをjsパッケージ化jsするとエラーが報告されます。どうすればよいですか？現時点loaderでloaderは、コンバーターです。のフォローcss例としてファイルを取り上げて説明します

testは正規表現を受け取り、ファイルのサフィックス名と一致し、実行のためにローダーに正常に入力します
文字列として記述できるローダーが1つだけの場合、useは配列を受け取ります

css-loader

インストール

npm i css-loader --save-dev

使用する

module.exports = {
    
    
     module: {
    
    
        rules: [
            {
    
    
                test: /\.css$/,
                use: ["css-loader"] or "css-loader"
            }
        ]
    }
}

構成後、loaderエラーは報告されませんが、コードは引き続き有効になります。cssファイルを解析しただけですがstyle、ページにマウントしていませんstyle-loader。組み合わせる必要があります。

スタイルローダー

インストール

npm i style-loader --save-dev

使用する

module.exports = {
    
    
     module: {
    
    
        rules: [
            {
    
    
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            }
        ]
    }
}

上記の例では、ローダーを順番に実行し、ローダーを後ろから前に実行する必要があります。最初にcssファイルが解析され、次に解析されたcssファイルがページスタイルタグにマウントされます。このとき、コードは有効になります。

プラグイン

clean-webpack-plugin

このとき、出力のファイル名を変更して再度パッケージ化すると、以前のdistパッケージの古いコードがまだ存在していることがわかります。このとき、パッケージ化するたびに新しいdistディレクトリを生成します。次に、それをプラグインに使用する必要があります。

clean-webpack-pluginプラグインをインストールします。ローカルインストールはバージョン3.0.0です。

npm i clean-wenpack-plugin --save-dev

使用する

const {
    
     CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    
    
    plugins: [
        new CleanWebpackPlugin()
    ]
}

html-webpack-plugin

パッケージ化したdist後、ディレクトリにindex.htmlファイルがない場合は、プラグインを使用できます。パッケージ化するたびにhtmlファイルが生成されます。以下にインストールしてみましょう。

html-webpack-pluginここで使用するインストールはバージョン3.2.0です。ローカルnodeバージョンが高いほど、インストールされるプラグインが新しくなり、新しいバージョンはwebpack4コードエラーと少し互換性がないか、コードエラーが発生する可能性があることに注意してください。

npm i html-webpack-plugin@3.2.0 --save-dev

使用する

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

module.exports = {
    
    
    plugins: [
        new HtmlWebpackPlugin({
    
    
            template: './index.html',  // 以咱们本地的index.html文件为基础模板
            filename: "index.html",  // 输出到dist目录下的文件名称
        }),
    ]
}

html-webpack-pluginプラグインはオブジェクトを受け取り、このオブジェクトにはいくつかの属性値があります。ここでは例を1つずつ挙げないでください。この記事「html-webpack-pluginの使用法の完全な説明」を読むことができます。

完全なコード

const {
    
     CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    
    
    entry: "./src/index.js",
    output: {
    
    
        path: __dirname + "/dist",
        filename: "index.js"
    },
    module: {
    
    
        rules: [
            {
    
    
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
    
    
            template: './index.html',
            filename: "index.html",
        }),
    ]
}

総括する

この時点でwebpack、導入が終了し、シンプルなパッケージ化が実現しました。webpackデフォルトでは、jsファイルのみが認識されます。css画像を使用する場合は、を使用loaderして変換できます。私たちは、最終的なパッケージの完全な、見ることができるdistディレクトリまたは、元のファイルの一部をhtml、css、js直接dist契約した背景にはライン上に展開しました。