[チュートリアル]ビルドにWebPACKの開発環境には、詳細な手順に反応します

Node.jsのをインストールします。1.

Webpack実際にNode.js書かれたので、最初のインストールNode.js環境。そして、Node.js統合されたNPMパッケージ管理、我々は、使用する必要の後ろに多くのモジュールを使用してNPM、ダウンロードを。

まず入る公式サイトのNode.js、ため、インストールパッケージをダウンロードするには、対応するシステムを選択しwindowsた場合、ユーザーが直接、インストールパッケージをインストールすることができますダウンロードしMacos、ユーザーが推奨される醸造インストール用。Node.js安定版と開発版を含む多くのバージョンが、ありますが、さまざまなプロジェクトが必要とするNode.jsさまざまなバージョンを、あなたがインストールすることをお勧めします8.x以降。

WebPACKのをインストールします。2.

私たちは、プロジェクトを作成し、新しいフォルダを作成する必要がある場合には、例えば、私はと呼ばれるCドライブを作成しますmyapp（フォルダをのみ、システムディスクがで推奨されていないプレゼンテーション置けばいいの）、これは、myapp現在のプロジェクトのルートディレクトリです。
アドレスバーのプロジェクトのルートで直接入力cmd以下のようにしてEnterキーを押して、プロンプトこのディレクトリコマンドで開くことができます入力します。
ここに画像を挿入説明
コマンドライン入力コマンドでは、カスタム生成package.jsonファイルを格納されている情報は、実行されるアイテムを記述するために使用されます次のコマンドを実行します。

cnpm init -y

注：このチュートリアルで一貫して使用淘宝網のミラーcnpmコマンドは、コマンドがcnpmをインストールする場合は、このコマンドを使用する前に確認し、インストールします

インストールするには、次のコマンドを入力し、ローカルプロジェクトにWebPACKのをインストールします。

cnpm install --save-dev webpack 
#或者简写
cnpm i -D webpack

正常にインストールがします後はmyapp自動的にプロジェクトの下、次を生成するnode_modulesディレクトリとpackage.jsonファイル：
ここに画像を挿入説明
し、インストールwebpack-cliツールを、次のコマンドを実行します。

cnpm i -D webpack-cli

コマンドが完了した後、我々は必要なpackage.jsonパッケージのコマンドファイルを設定します。でpackage.json、ファイルscripts、次の構成項目のプロパティを追加します。

{
    "scripts": {
        "build": "webpack --mode production"
    }
}

3.インストールが反応し、反応し、DOM

：コマンドプロンプトで、順番に次のコマンドを実行し、現在のプロジェクトのルートディレクトリを探し
反応インストールします。

cnpm i -S react

インストールが反応し、DOM：

cnpm i -S react-dom

インストールバベル：

cnpm i babel-loader @babel/core @babel/preset-env -D

インストールバベルプリセットが反応します：

cnpm i @babel/preset-react -D

ソースファイルのプロジェクトのディレクトリ構造を作成します。4。

プロジェクトで作成されたwebpack.config.jsコンフィギュレーションファイル、および設定ファイルに追加しJSXた構文Babelは次のようコンパイラのサポート、文書が読み取ります。

module.exports = {
    resolve: {
        extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/, // jsx/js文件的正则
                exclude: /node_modules/, // 排除 node_modules 文件夹
                use: {
                    // loader 是 babel
                    loader: 'babel-loader',
                    options: {
                        // babel 转义的配置选项
                        babelrc: false,
                        presets: [
                            // 添加 preset-react
                            require.resolve('@babel/preset-react'),
                            [require.resolve('@babel/preset-env'), {modules: false}]
                        ],
                        cacheDirectory: true
                    }
                }
            }
        ]
    }
};

プロジェクトのルートディレクトリに作成されたsrcとpublic、この時点でプロジェクトのフォルダ構造効果で次の絵になっています：
ここに画像を挿入説明

SRCディレクトリ：そのような文書または.jsxの.jsファイルとしてストアファイルに使用されるソースプロジェクト;
publicディレクトリ：そのよう.htmlファイルや画像などの店舗のアイテムに使用される静的ファイル、

;のindex.htmlファイル（プロジェクトのデフォルトのホームページ）：パブリックディレクトリに作成
srcディレクトリに作成：index.js、App.jsファイル（ソースコードを書きます）。

public/index.htmlプロジェクトファイルには、次のように読み込み、デフォルトのホーム・ページ、次のとおりです。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>Hello React</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

src/App.js以下のようにファイルには、カスタムコンポーネントであります：

import React from 'react';

function App () {
	return (
		<div>
			React from Webpack
		</div>
	);
};
export default App;

src/index.js次のようにプロジェクトファイルは、ファイルのエントリです。

import React from 'react';
import ReactDom from 'react-dom';
import App from './App';

ReactDom.render(<App />,document.getElementById('root'));

これ、完全に構築するために我々のプロジェクトのディレクトリ構造。
その後、我々はこれらのファイルを作成したことを、いくつかの設定を行います。まず開くwebpack.config.jsファイル、設定webpack、入り口のを次の行を追加します。

module.exports = {
    entry: './src/index.js',  //添加入口配置项
    // ...
};

インストール以下ではhtml-webpack-plugin、このプラグインを、次のコマンドを実行します。

cnpm i html-webpack-plugin -D

プラグインは、2つの主要な機能を有します。

そのようなhtmlファイルのスクリプトなどの外部リソースの紹介、リンクが動的に外部参照ファイルのキャッシュの問題を防ぐために、各ハッシュコンパイル後に追加。

HTMLファイルエントリを作成するような単一のHTMLページとして生成することができるファイル・エントリを生成してもよい、N、HTMLのWebPACK・プラグインの構成は、入口Nページを生成することができます。

インストール後、および変更webpack.config.js設定を、導入されたwebpackプラグインを使用します。

const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
    // ...
    plugins: [
        new HtmlWebPackPlugin({
            template: 'public/index.html',
            filename: 'index.html',
            inject: true
        })
    ]
};

上記の操作が完了したら、パッケージのコマンドを実行できます。

npm run build

コマンドラインで、次の内容が表示されますが、成功したパッケージを証明した場合は、次の
ここに画像を挿入説明
成功したパッケージた後、プロジェクトのルートディレクトリが生成されますdistフォルダを、フォルダがパッケージに格納される.htmlと.js、ファイル。

5.設定ローカルサーバ

私たちは、に基づくことができて、ローカルサーバセットアップミドルウェア実装するとの相互作用。ローカルサービスを実装するには、次の3つの手順が必要です。Node.jsExpressExpresswebpack-dev-middlewareWebpack

ステップ1：WebPACKの-devのサーバモジュールのインストール
インストールコマンドを：

cnpm i webpack-dev-server -D

ステップ2：設定サービスエントリー
正常にインストールした後は、あなたがする必要があるwebpack.config.jsファイルサーバの設定を行います。

const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
    mode: 'development',
    devtool: 'cheap-module-source-map',
    devServer: {
        contentBase: path.join(__dirname, './public/'),
        publicPath: '/',
        host: '127.0.0.1',
        port: 3000,
        stats: {
            colors: true
        }
    },
    //......
};

ステップ3：起動コマンドを設定する
にはpackage.json、ファイルのscripts追加、プロパティstartのスタートアップアイテムを：

{
    "scripts": {
        "build": "webpack --mode production",
        "start": "webpack-dev-server --mode development --open"
    }
}

上記の手順が完了した後、コマンドラインを実行しnpm start、サーバーを起動することができます！
サーバが起動された後、それが自動的にブラウザを開いて、私たちの設定したアドレスを訪問します：
ここに画像を挿入説明
ソースコードを変更すると、自動的にページを更新することができます。

これは、成功した構築するための環境を反応して、我々はに基づいて、この環境でプロジェクトを開発することができます。

概要

原因Webpack主に単純に手の届かないところに仕事で構築し、アイテムをパッケージ化し、さらにいくつかの学生のためにWebpack一度だけ、またはプロジェクトの設定Webpack、それは後に再び使用されることはありません。これらの学生のために、私が使用したときに、このチュートリアルでは、アイデアや操作方法を持つことができ、将来的にあなたに知識のいくつかの新しい株式を持って来ることを願って。
そこの学生が、今足場のツールを使用している、直接言うだろうcreate-react-app構築された環境は、便利で簡単に良いです。まず第一に、このビューは正しいですが、私はまた、あなたが足場環境を構築するためのツールを使用することをお勧めしますが、フロントエンドエンジニアとして、私たちは環境の動作原理を知って、より良いフレームを制御するために、時にコードのエラー、としません損失。
Webpackだけでなく、学生はまた、フロントエンドエンジニアリングの開発を、コンテンツに動作しますが、将来の面接、筆記試験の義務を研究のフロントフレームの前提を要求されますされWebpack、特に大規模な階層のインターネット企業にとって、ますます重要になってきている、意志ないだろうWebpackでも、直接あなたが借りることができるかどうかを決定することができます。私たちが学ぶように、Webpackフロントエンドの開発作業への最初のステップです。

柯のXiaonan

公開された124元の記事・ウォンの賞賛9 ・ビュー20000 +

プライベートの手紙の懸念