Webpackを操作してファイルを処理する方法

今回は、webpackのファイル処理の操作方法と、webpackを操作してファイルを処理する際の注意事項を紹介します。実際のケースを見てみましょう。

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

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

これに基づいて: 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')
 ]
};

この後の方法はマスターできたと思います。この記事の事例を読んで、さらに php 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

Webpack がファイルを動的にインポートする方法

CDN の React Webpack を使用してファイルをパッケージ化する

WeChat アプレットの円形プログレスバーを作成する方法

以上がWebpackを操作してファイルを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。