webpack学習ノート(一)

ことばを引く
最近webpackを勉強していますが、多くの知識点を発見しました.babel、coree-js、browserslistなど、これまで接触したことがありません.以前はcliを使ってプロジェクトを構築することに慣れて、多くのものは考慮しなくてもいいです.持ってきて使ってもいいです.このような私達は能力がアップすることができません.もっと多くの知識点を知ってこそ、素晴らしい先端エンジニアになれると思います.
私は大体私の学習過程を整理して、簡単に分類して、問題を解決する道を弁舌さわやかに述べています.もちろん私の勉強も完璧ではないです.引き続き努力します.
webpackを学ぶためにまず必要な基礎は:
1.node.jsとは何かを知る.
2.npmパッケージマネージャとは何か、package.jsonの常用属性の意味を知る.
この基礎の上で、私達は一歩ずつwebpackを学んで、およびどのようにwebpackを使って包装を行います.
webpack概要
webapckは先端の資源を梱包するツールで、最も核心的な機能はモジュール間の依存問題を解決することです.聞き慣れていますか?はい、そうです.AMD規格、CommonJS規格を勉強したことがあると、webpackはこれらの規範に基づいて発展したオープンソースツールであり、先端開発者がモジュール化して工程化された問題を解決します.(PS:AMD、CommunJSの仲間を知らなかったので、簡単に調べてみてください.これはjsモジュール化の基礎です.この基礎を知ってこそ、先端モジュール化を理解できます.先端工程化をもっと理解してこそ、webpackが何をしているのかが分かります.)
ここでは簡単にjsモジュール化を説明します.多くの仲間が図仔から前後端まで分離する先端工程モードに入る時、少し怖いです.先端工程とはどういう概念なのか分かりません.実は先端工程化ということです.つまり、開発中の大型ウェブアプリケーションの場合、ページの相互作用が非常に頻繁で、多くの計算、データ処理、業務コードをクライアント(ブラウザ)に置いて処理しました.こんなに多くのコードは、どのように管理とメンテナンスを行いますか?それとも違うページのラベルの に いますか?これは つのhtmlではなく、 つのだけを して、 のは このの で しますか?この 、jsモジュール が み、AMDやCommunJSなどの が まれました.これらの があれば、 たちはjsとjsの の をゆっくりと できます.webpackは のモジュールを つのjs(または )のツールにパッケージ しています.これは つのタグだけを することもできます.
webpackはjsだけでなく、css、image、videoなどのように、フロントエンドの な を して することができます.そして、パッケージ の で を します.コード 、コード など、 なloader(プリプロセッサ)、plugis(プラグイン)を して、あなたのコードを にES 6=>ES 5、SCSS=>css などの があります. するに、webpackはすでに ツールであり、 を し、 を した 、 に できます. のことはwebpackに せます.
インストール
webpackをインストールする に、 にNode.jsがインストールされていることを する があります.もしインストールされていないなら、Node.js サイトでダウンロードしてください.(https://nodejs.org/)
まず たちのプロジェクトフォルダを します.

    npm init -y

が わったら、webpackの サイトを きます.https://webpack.js.org/ を むのは しいパートナーがいます. の り えボタンを して、 で します. を り えたら、ナビゲーションバーの「ドキュメント」 をもう クリックし、ナビゲーションの「ガイド」ページをクリックします.この 、 のメニューには にwebpackの ガイドが れています.
まずメニューを びます.インストールします.
の で、 を してインストールすることができます.プロジェクト のことを えて、Gitでバージョンコントロールとシェアを うかもしれないので、 でのインストールをオススメします.ローカルインストールを うと、webpackはnode_に されます.modulesフォルダ とdevDependencies では、プロジェクトファイルの や などに です.
webpackを うには、3つのカバンを する があります.それぞれ
1.webpack(コアパック)
2.webpack-cli( )
3.webpack-dev-server( サーバ)
webpackコアバッグは、その の り、 として わなければならないカバンです.
webpack-cli は、webpackを う に、 で するオプションを らしてくれます.もっと です.カスタマイズした のツールを って、wepback v 4.0からインストールしなければなりません.
webpack-dev-serverは が にある 、 のデバッグごとに することができません.だから、 い さのサーバーが です.
npmコマンドを します

    npm install --save-dev webpack webpack-cli webpack-dev-server

はい、インストールに しました.
ファイル
webpackはデフォルトで の が く に えるように を しています.webpackはプロジェクトの り の がsrc/indexであると して、dist/main.jsで を し、 で と を します.
しかし、 はプロジェクトを る に、webpackがいろいろな な を してくれます.プロジェクトのルートディレクトリでwebpack.co.nfig.jsファイルを できます.webpackは にそれを います.

const path = require('path');

module.exports = {
    mode: "production", // "production" | "development" | "none"  // Chosen mode tells webpack to use its built-in optimizations accordingly.
    entry: "./app/entry", // string | object | array  //     './src'
    //           
    // webpack     
    output: {
        // webpack            
        path: path.resolve(__dirname, "dist"), // string
        //            
        //        （   Node.js   path   ）
        filename: "bundle.js", // string    // 「    (entry chunk)」      
        publicPath: "/assets/", // string    //          ，url     HTML   
        library: "MyLibrary", // string,
        //    (exported library)   
        libraryTarget: "umd", //           //    (exported library)   
        /*       （    ） */
    },
    module: {
        //       
        rules: [
            //     （   loader、      ）
            {
                test: /\.jsx?$/,
                include: [
                    path.resolve(__dirname, "app")
                ],
                exclude: [
                    path.resolve(__dirname, "app/demo-files")
                ],
                //        ，                  
                // test   include        ，        
                // exclude        （    test   include）
                //     ：
                // -    test                 
                // -   include   exclude          
                // -      exclude，       include
                issuer: {
                    test,
                    include,
                    exclude
                },
                // issuer   （   ）
                enforce: "pre",
                enforce: "post",
                //         ，      （    ）
                loader: "babel-loader",
                //       loader，        
                //      ，`-loader`     webpack 2        
                //    webpack 1     。
                options: {
                    presets: ["es2015"]
                },
                // loader     
            },
            {
                test: /\.html$/,
                use: [
                    //      loader    
                    "htmllint-loader",
                    {
                        loader: "html-loader",
                        options: {
                            /* ... */
                        }
                    }
                ]
            },
            {
                oneOf: [ /* rules */ ]
            },
            //            
            {
                rules: [ /* rules */ ]
            },
            //           （      ）
            {
                resource: {
                    and: [ /*    */ ]
                }
            },
            //              
            {
                resource: {
                    or: [ /*    */ ]
                }
            },
            {
                resource: [ /*    */ ]
            },
            //          （     ）
            {
                resource: {
                    not: /*    */
                }
            }
            //         
        ],
        /*       （    ） */
    },
    resolve: {
        //          
        // （      loader   ）
        modules: [
            "node_modules",
            path.resolve(__dirname, "app")
        ],
        //          
        extensions: [".js", ".json", ".jsx", ".css"],
        //       
        alias: {
            //       
            "module": "new-module",
            //    ："module" -> "new-module"   "module/path/file" -> "new-module/path/file"
            "only-module$": "new-module",
            //     "only-module" -> "new-module"，     "only-module/path/file" -> "new-module/path/file"
            "module": path.resolve(__dirname, "app/third/module.js"),
            //     "module" -> "./app/third/module.js"   "module/file"      
            //               
        },
        /*          （    ） */
        /*       （    ） */
    },
    performance: {
        hints: "warning", //       maxAssetSize: 200000, //     （      ）
        maxEntrypointSize: 400000, //     （      ）
        assetFilter: function (assetFilename) {
            //             
            return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
        }
    },
    devtool: "source-map", // enum  //           (browser devtools)      (meta info)    
    //          `source-map'      。
    context: __dirname, // string（    ！）
    // webpack     
    // entry   module.rules.loader   
    //         
    target: "web", //     // bundle        
    //         (chunk loading behavior)       (available module)
    externals: ["react", /^@angular\//], //     /      ，              
    serve: { //object
        port: 1337,
        content: './dist',
        // ...
    },
    //   webpack-serve     
    stats: "errors-only", //          bundle   
    devServer: {
        proxy: { // proxy URLs to backend development server
            '/api': 'http://localhost:3000'
        },
        contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
        compress: true, // enable gzip compression
        historyApiFallback: true, // true for index.html upon 404, object for multiple paths
        hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
        https: false, // true for self-signed, object for cert authority
        noInfo: true, // only errors & warns on hot reload
        // ...
    },
    plugins: [
        // ...
    ],
    //       
    /*     （    ） */
}

の はwebpack サイトの「 」の の を しています. の から かるように、webpackの は に くの のようです. たちは ろの の で、 に な がありますか?
ファイル
プロジェクトの がないので、さまざまな ファイルを して、いろいろな に することができます.この 、build.co nf.js、test.co nf.jsなどの のプロファイルを に することができます.package.jsonでこのような を います.
このようにすれば、 なるnpmコマンドを して、 なるプロファイルを って、 する ができます.
り と
npmの さいパートナーを っています.package.jsonにはmain があります. の を しています.mainで すjsファイルを じて、 つの (またはクラスまたは )を ます.
たちはCommon JS を じて:

const XXX = require('XXX')'

を します.
webpackの り と は、これと に ています.webpackを って する は、 なくとも つの り を し、それに する を する があります.たとえば:

    const path = require('path')

    module.exports = {
        entry: "./src/main", // string | object | array  //     './src'
        //           
        // webpack     
        output: {
            // webpack            
            path: path.resolve(__dirname, "dist/assets"), // string
            //            
            //        （   Node.js   path   ）
            filename: "/[name].js", // string    // 「    (entry chunk)」      
        },
    }

これらを したら、webpackに を するように すればいいです.

npx webpack

ここでは、webpackとwebpack-cliを にインストールしていませんので、webpackコマンドを して することはできません.npxコマンドを ってwebpackコマンドに します.ここでは のためだけに、webpackコマンドを って することができますが、 のプロジェクト の で、 たちはこのように いません.ですから、 の では、パッケージのコマンド だけを します.また、package.jsonにおけるスクリプトコマンドは、 にwebpackをインストールする はなく、ローカルにインストールすれば いです.つまり の です.
package.json

{
    "scripts": {
        "build":"webpack --config webpack.config.js"
    }
}

npm runスクリプト を って できます.

npm run build

…