簡単にwebpackの4つの核心概念のEnttryを話します。
webpackはnodejsに基づいたツールですので、学習過程で関わるnodejs知識も解釈して発散的に展開します。
webpack中国語の文書
一、module.exports
entryエントリの開始点であり、entryで構成されているファイルパスが指すファイルはプロジェクトの入口ファイル、すなわち内部依存の開始は、エントランスファイルに従って層ごとに依存をロードします。Chunkとパッケージ時の入り口ファイルの配置に関しては、もしentryがstringやarrayであれば、Chunkという名前はmainであり、entryがobjectであれば、複数のChunkが出現する可能性があります。Chunkの名前はobjectキーの対内ボタンの名前です。
イベントは3種類の値を受け付けています。
1.シングルエントリの書き方String例:
3.対象文法Object例:
第三者モジュールとwebpackファイルを分離するなど、公共モジュールと似たようなものは、ロードなどの問題を避けるために、時間がかかりすぎて、最適化されます。ここでは主にイベントの対象文法とCommons ChunkPluginを適用します。実用例:
1.業務モジュールと公共モジュール(webpackファイル、第三者モジュール、カスタム共通モジュール)を分離する。
webpack中国語の文書
一、module.exports
module.exports = {
entry: './path/to/my/entry/file.js'
};
exports変数は、モジュールのファイルレベルのスコープ内で利用可能であり、モジュール実行前にmodule.exportsに値を与え、nodejsにexportとrequireの2つのオブジェクトを提供しています。ここでexportsはモジュール公開のインターフェースであり、外部からモジュールのインターフェース、すなわち取得モジュールのexportオブジェクトを取得するためにrequireを使用します。exportsが投げ出したインターフェースの中で、もしあなたがモジュールを望むならば、特別な対象のタイプにしたいです。module.exportsを使ってください。モジュールが伝統的なモジュール例になることを望むなら、exports.xx方法を使用してください。module.exportsこそ本当のインターフェースです。exportsはその補助ツールにすぎません。最終的に呼び出しに戻ったのはexportsではなくmodule.exportsです。ここではnodejs公式サイトの一つを引用します。 例
function require(/* ... */) {
const module = { exports: {} };
((module, exports) => {` `
// 。 , 。
function someFunc() {}
exports = someFunc;// exports exports module
// ,exports module.exports ,
// 。
module.exports = someFunc;// module
// , someFunc, 。
})(module, module.exports);
return module.exports;// ( module.exports exports)
}
二、ベンryentryエントリの開始点であり、entryで構成されているファイルパスが指すファイルはプロジェクトの入口ファイル、すなわち内部依存の開始は、エントランスファイルに従って層ごとに依存をロードします。Chunkとパッケージ時の入り口ファイルの配置に関しては、もしentryがstringやarrayであれば、Chunkという名前はmainであり、entryがobjectであれば、複数のChunkが出現する可能性があります。Chunkの名前はobjectキーの対内ボタンの名前です。
イベントは3種類の値を受け付けています。
1.シングルエントリの書き方String例:
entry: './app/to/my/entry/file.js'
entry:{ main:"'./app/to/my/entry/file.js'"}
2.単一入口配列の書き方Aray例:
entry:['./app/entry1', './app/entry2']
複数の依存ファイルを一緒に注入し、それらの依存ガイドを一つの「chunk」に導くときに、行列に入る方法が有用です。つまり、複数のファイルを統合した依存モジュールです。3.対象文法Object例:
entry:{ a: './app/entry-a', b: ['./app/entry-b1', './app/entry-b2']}
第三者モジュールと共通モジュールを分離第三者モジュールとwebpackファイルを分離するなど、公共モジュールと似たようなものは、ロードなどの問題を避けるために、時間がかかりすぎて、最適化されます。ここでは主にイベントの対象文法とCommons ChunkPluginを適用します。実用例:
1.業務モジュールと公共モジュール(webpackファイル、第三者モジュール、カスタム共通モジュール)を分離する。
const path = require("path");
const webpack = require("webpack");
const packagejson = require("./package.json");
const config = {
entry: {
first: './src/first.js',// common.j vue.js
second: './src/second.js',// common.j vue.js
vendor: Object.keys(packagejson.dependencies)//
// , , chunk
// vue
},
output: {
path: path.resolve(__dirname,'./dist'),
filename: '[name].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',// chunk vendor,
chunk , name commons chunk。
filename: '[name].js'//
}),
]
}
module.exports = config;
2.業務モジュールを詳細に分離し、第三者が公共モジュールwebpackに依存してファイルを実行する
plugins: [// webpack
new webpack.optimize.CommonsChunkPlugin({//
name: 'vendor',
filename: '[name].js'
}),
new webpack.optimize.CommonsChunkPlugin({// vendor webpack
name: 'runtime',
filename: '[name].js',
chunks: ['vendor']
}),
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor','runtime'],
filename: '[name].js',
minChunks: Infinity// (entry chunks) >= 3 ,
//
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: '[name].js',
minChunks:2,// 2, chunk
// common first second
chunks: ['first','second']// first.js second.js commons chunk
}),
]
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。