Webpack 内の指定された場所にファイルをバンドルしてロードする (詳細なチュートリアル)

以下に、webpack をパッケージ化して指定した場所にファイルをロードする方法を紹介します。これは参考になるので、皆さんのお役に立てれば幸いです。

パッケージ化に webpack を使用することの最も良い点は、ファイルを直接要求できることですが、これには

という問題もあります。つまり、すべてのファイルが統合されるとパッケージが大きくなりすぎます。

これに基づいて: webpack のパッケージ化について学びましょう (主に必要なコンテンツ モジュールを個別にパッケージ化する方法

、そして設定したストレージ パスに従ってそれらを保存する方法)

まず第一に、

webpack.config.js ファイルの

entry エントリ関数は、どの項目を js パッケージに個別にパッケージ化する必要があるかを示します:

entry: {
  main: path.resolve(__dirname,'src/index.js'),
  jq: ['jquery'],
  react: ['react'],
  redom: ['react-dom']
},
output: {
  path: path.resolve(__dirname,'dist'),
  publishPath: 'dist/',
  filename: '[name].js'
 },
plugin: [
  new webpack.optimize.CommonsChunkPlugin('jq','jq.js'),
  new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),
  new webpack.optimize.CommonsChunkPlugin('redom','redom.js')
]

ファイルが作成されたときに jq が dist ディレクトリに追加されるように、上記のように設定します。 js、vendors.js、redom.js が 3 つの js です

上記は、複数のパッケージをパッケージ化する必要があるという問題を解決します。

それでは、パッケージ化された js を指定された場所に保存したい場合はどうすればよいでしょうか? まあ、心配しないでください。

の具体的な実装は次のとおりです (実際には、主にエントリ関数に違いがあります):

entry: {
  './common/main': path.resolve(__dirname,'src/index.js'),
  './jquery/jq': ['jquery'],
  './react/react': ['react'],
  './reactdom/redom': ['react-dom']
 },

上に示したように、4 つの js は、私たちが定式化した dist の下の 4 つのファイルに保存されます。つかまった。 (注: 現時点では、webpack.optimize.CommonsChunkPlugin プラグインを使用する必要はありません)

最後に、左右の webpack.config.js コードを貼り付けます:

var webpack = require('webpack');
var path = require('path');
module.exports = {
 entry: {
  './common/main': path.resolve(__dirname,'src/index.js'),
  './jquery/jq': ['jquery'],
  './react/react': ['react'],
  './reactdom/redom': ['react-dom']
 },
 output: {
  path: path.resolve(__dirname,'dist'),
  publishPath: 'dist/',
  filename: '[name].js'
 },
 module: {
  loaders: [
   {
    test: /\.scss$/,
    loader: 'style!css!sass'
   },
   {
    test: /\.js$/,
    exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\/|presets\//,
    loader: 'babel'
   },
   {
    test: /\.(png|jpg|gif)$/,
    loader: 'url?limit=40000'
   }
  ]
 },
 babel: {
  presets: ['es2015','stage-0','react'],
  plugins: ['transform-runtime',["antd",{"style": "css"}]]
 },
 resolve: ['js','jsx','css'],
 plugins:[
  new webpack.ProvidePlugin({
   $:"jquery",
   jQuery:"jquery",
   "window.jQuery":"jquery"
  })
 // new webpack.optimize.CommonsChunkPlugin('jq','jq.js'),
 // new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),
 // new webpack.optimize.CommonsChunkPlugin('redom','redom.js')
 ]
};

上記は、私が全員のためにコンパイルしたものです。 . 今後も皆様のお役に立てれば幸いです。

関連記事:

vueでeventBusを使ってピアコンポーネント間の通信を実現する方法

vue2.0でカスタム円グラフ(Echarts)コンポーネントを実装する方法

vue Displayでスロットを実装する方法子コンポーネントの親コンポーネントによって渡されるテンプレート (詳細なチュートリアル)

以上がWebpack 内の指定された場所にファイルをバンドルしてロードする (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。