ホームページ  >  記事  >  ウェブフロントエンド  >  vue学習メモ(1) - webpack学習

vue学習メモ(1) - webpack学習

不言
不言オリジナル
2018-03-31 10:11:572040ブラウズ

Vue を学ぶ前に、まずフロントエンド パッケージング ツールである webpack について学びましょう。興味のある方は、ぜひご覧ください。Vue は最近、その名前を聞いたことがあるプロジェクトです。長い間、私はそれについてほとんど知りませんでしたが、この機会に Vue について学びましょう。

Vue を学ぶ前に、フロントエンド パッケージング ツールである webpack を初めて学びました。これは現在非常に優れており広く使用されているパッケージング ツールです。公式の webpack チュートリアルに従って学習してください。ただし、公式のチュートリアルは現在 webpack3 に基づいており、実際に使用するのは webpack4 です。現時点ではいくつかの大きな違いがあるため、簡単にまとめておきます。今後の見直しと勉強。


Webpackの1つの概念

webpackは静的コンパイルツール(プリコンパイル)[静的モジュールバンドル]であり、seaJsやrequireJS(オンラインコンパイル)とは異なり、javacとjitの違いに似ています

webpackにはいくつかの概念があります


  • Entry

  • Entry ファイル、webpack コンパイル済みエントリ、webpack はすべての依存関係のルートを見つけ、最終的にはすべての依存関係を関連付けます

  • output

  • 編集結果 (バンドル) の出力場所、出力結果の名前の付け方など

  • loader

  • webpackはさまざまなファイルを処理するために使用され、ローダーはインポートを使用して導入されたすべてのファイルを(理論上)処理できます。ローダーは module.rules で設定する必要があります。test (どのファイルを処理するか) と use (どのローダーを使用するか) の 2 つの必須属性があります。設定が間違っている場合、webpack はエラーを報告します

  • プラグイン さまざまなタスクを処理するために使用されます。その範囲と役割はローダーよりも大きく、使用する場合は、require()を使用して導入し、プラグインに追加する必要があります。さまざまな目的でプラグインを複数回使用する場合は、new を使用してプラグインを初期化する必要があります

2 つの環境の分離

異なる環境の分離を実現するには、webpack3 の webpack.DefinePlugin プラグインを使用します: 開発webpack4 でのこのメソッドの使用は無効になり、別の環境を指定するには新しく提供されたモードを使用する必要があります。

モードは開発と運用に分かれており、どちらかを設定する必要があります。設定しないとエラー メッセージが報告されます。

new webpack.DefinePlugin({
    //许多 library 将通过与 process.env.NODE_ENV 环境变量关联,以决定 library 中应该引用哪些内容
     // 在webpack4中mode会自动设置该信息,废弃该配置
    "process.env.NODE_ENV": JSON.stringify("development")
})
3 つのソース マップ


webpack4 ではデ​​フォルトで Eval が使用されます。devtool: "inline-source-map" を設定することでデフォルト設定を変更できます。本番環境では「source-map」の使用を推奨します

4つのコード分離

4.1 CSSなどを分離する

cssとjsを分離するにはプラグインextract-text-webpack-pluginを使用します。公式例:

https://doc.webpack-china.org...

具体的な設定は次のとおりです:

// 环境设置,webpack4必须有该值,使用该属性来设置不同的环境,目前有development和production两种,也可以使用:--mode development设置
// process.env.NODE_ENV会被该设置覆盖
mode:"development",

4.2 共通モジュールの分割

CommonChunkPlugin が webpack4 によって放棄されたため、webpack4 は共通モジュールを抽出するために SplitChunkPlugin を使用することを推奨します。モジュール。 webpack 公式 Web サイト (https://webpack.js.org) のはずなので、オンライン情報の紹介はあまり詳しくありません。オンライン検索の結果に基づいて、最終的にパブリック モジュールの分離が達成されました。まだ解決されていない多くの疑問があり、関連情報を見つける必要があります。

公式の例を参照できます: https://github.com/webpack/we...

具体的な設定は次のとおりです:

SplitChunkPlugin を使用するには 2 つの方法があります:


1 つは、optimization.splitChunks

// 将CSS分离 https://doc.webpack-china.org/plugins/extract-text-webpack-plugin
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//使用extractTextPlugin就不能在单独使用style-loader
config.module:{
     rules:[
      {
        test:/\.css$/,
        use : ExtractTextPlugin.extract({
            fallback : "style-loader",
            //这样使用会出现url()解析路径错误的问题
            //use : "css-loader"
            //使用该方式解决url()路径问题
            use:[
                {
                    loader:"css-loader",
                    options:{
                        //用于解决url()路径解析错误
                        url:false,
                        minimize:true,
                        sourceMap:true
                    }
                }
                ]
            })
        },  
    ]
}

2番目:新しいwebpack.optimize.SplitChunksPlugin

具体的な設定はoptimization.splitChunksと同じです

5つのホットリプレースメント
次の設定を使用します:

webpack3で次の設定を使用します

optimization: {
        //提取公共模块,webpack4去除了CommonsChunkPlugin,使用SplitChunksPlugin作为替代
        //主要用于多页面
        //例子代码 https://github.com/webpack/webpack/tree/master/examples/common-chunk-and-vendor-chunk
        //SplitChunksPlugin配置,其中缓存组概念目前不是很清楚
        splitChunks: {
            // 表示显示块的范围,有三个可选值:initial(初始块)、async(按需加载块)、all(全部块),默认为all;
            chunks: "all",
            // 表示在压缩前的最小模块大小,默认为0;
            minSize: 30000,
            //表示被引用次数,默认为1
            minChunks: 1,
            //最大的按需(异步)加载次数,默认为1;
            maxAsyncRequests: 3,
            //最大的初始化加载次数,默认为1;
            maxInitialRequests: 3,
            // 拆分出来块的名字(Chunk Names),默认由块名和hash值自动生成;设置ture则使用默认值
            name: true,
            //缓存组,目前在项目中设置cacheGroup可以抽取公共模块,不设置则不会抽取
            cacheGroups: {
                //缓存组信息,名称可以自己定义
                commons: {
                    //拆分出来块的名字,默认是缓存组名称+"~" + [name].js
                    name: "test",
                    // 同上
                    chunks: "all",
                    // 同上
                    minChunks: 3,
                    // 如果cacheGroup中没有设置minSize,则据此判断是否使用上层的minSize,true:则使用0,false:使用上层minSize
                    enforce: true,
                    //test: 缓存组的规则,表示符合条件的的放入当前缓存组,值可以是function、boolean、string、RegExp,默认为空;
                    test:""
                },
                //设置多个缓存规则
                vendor: {
                    test: /node_modules/,
                    chunks: "all",
                    name: "vendor",
                    //表示缓存的优先级
                    priority: 10,
                    enforce: true
                }
            }
        }
    }

webpack4では、NamedModulesPlugin開発モードではデフォルト設定として設定されています 自動的にオンになりますので、この項目を設定する必要はありません


Six Tree Shaking

webpack4は、開発モードではTree Shakingを使用せず、本番モードでのみオンになります。 uglifyjs-webpack-plugin を使用して難読化されたコードを圧縮できます

Seven Lazy 読み込み

import() を使用して必要なモジュールを導入します。この部分は、js の先頭ではなく、メソッド内で呼び出されます。

vueやreactなどのフレームワークに付属する遅延読み込み実装を使用することをお勧めします



以上がvue学習メモ(1) - webpack学習の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。