Webpack 05マルチエントリファイルページパッケージ構成

8109 ワード

webpack

ほとんどの場合、Webpackパッケージを使用して単一ページアプリケーションをパッケージ化し、複数ページのプロジェクトに遭遇することもあります.
シングルエントリ構成
一般的な構成テンプレートは次のとおりです.

module.exports = {
  entry: {},
  output: {},
  module: {},
  plugins: [],
  devServer: {}
}

entry:エントリファイルを構成するアドレスは、単一のエントリであってもよいし、マルチエントリであってもよい.

output:出口ファイルのアドレスを構成し、マルチ出口構成をサポートする.

module:モジュールを配置し、主にCSSとピクチャ変換圧縮などの機能を解析する.

plugins:プラグインの構成;

devServer:開発サービス機能の構成;

entry
私たちのエントリファイルは普通JSファイルです.

entry： {
  entry: './src/entery.js'
}

output output webpackの最後のパッケージファイルのアドレスとファイル名を伝えるために使用されます.

output: {
  //        
  path: path.resolve(__dirname, 'dist'),
  //        
  filename: 'bundle.js'
}

もちろんpathモジュールも導入されます.これはnodejsが持参したモジュールです.webpack.config.jsファイルのヘッダに導入される.

const path = require('path');

HTMLファイルのパッケージ
htmlテンプレートファイルをパッケージ化し、すべてのwebpackパッケージファイルを参照した新しいhtmlファイルを自動的に生成するhtmlプラグインが必要です.
インストール:

npm install html-webpack-plugin --save-dev

プロファイルのpluginsにロード

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

var webpackConfig = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    minify:{
      removeAttributeQuotes: true,
      collapseWhitespace: true
    },
    template: './src/index.html'
  })]
};

これにより、以下の内容を含むファイルdist/index.htmlが生成されます.


<html>
  <head>
    <meta charset="UTF-8">
    <title>webpack Apptitle>
  head>
  <body>
    <script src="index_bundle.js">script>
  body>
html>

このような最も基本的な単一ページのプロファイルは、次のとおりです.

const path = require('path');
module.exports = {
  //        
  entry: {
    entry: './src/entry.js'
  },
  //        
  output: {
    //     ，  Node  
    path: path.resolve(__dirname, 'dist'),
    //       
    filename: 'bundle.js'
  },
  //  ：    CSS,      ，  
  module: {},
  //  ，           
  plugins: [new HtmlWebpackPlugin({
    minify:{
      removeAttributeQuotes: true,
      collapseWhitespace: true
    },
    template: './src/index.html'
  })]
  //  webpack      
  devServer: {}
}

マルチエントリ構成
マルチエントリ構成の場合はentryにエントリファイルを1つ追加するだけです
出力ファイルの場合はfilenameの値を[name].jsに変更し、エントリファイルの名前に基づいて同じ名前にパッケージ化し、いくつかのエントリファイルがあれば、いくつかのエクスポートファイルをパッケージ化することができます.
同時に複数のHtmlWebpackPluginプラグインを定義し、いくつかのページでいくつかの項目を構成します.

module.exports = {
  entry: {
    client1: './src/client1/client1.js',
    client2: './src/client2/client2.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'client1',
      filename: 'client1.html',
      template: 'src/client1/client1.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true
      }
    }),
    new HtmlWebpackPlugin({
      title: 'client2',
      filename: 'client2.html',
      template: 'src/client2/client2.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true
      }
    })
  ],
};

リファレンス

https://webpack.docschina.org/plugins/html-webpack-plugin/

https://github.com/zhuangZhou/webpack_demo

https://juejin.im/post/5a534cb9f265da3e4674ebeb

https://github.com/jantimon/html-webpack-plugin#configuration

AmazonMWSへアクセスする

Javaベースメンバー変数とローカル変数