Webpack でファイルのエントリとファイルのエクスポートを構成する方法

この記事の内容は、Webpack での設定ファイルの入力とファイルのエクスポート方法に関するもので、必要な方は参考にしていただければ幸いです。

1. Webpack の構成ファイルである webpack.config.js として js ファイルを作成します

module.exports={  
    entry:{}, //入口文件的配置项
    output:{}, //出口文件的配置项
    module:{}, //模块：例如解读CSS,图片如何转换，压缩  
    plugins:[], //插件，用于生产模版和各项功能 
    devServer:{}//配置webpack开发服务功能}

• entry: エントリ ファイルのアドレスを構成します。これは、単一のエントリまたは複数のエントリの入り口。

• 出力: webpack2.X バージョン以降、マルチエクスポート構成がサポートされます。

• module: 主にCSSの解析や画像の変換と圧縮などの機能のための構成モジュール。

• プラグイン: 必要に応じてプラグインを構成し、さまざまな機能を持つプラグインを構成します。

• devServer: 開発サービス機能を設定します。後で詳しく説明します。

エントリーオプション(エントリー設定)

• wepback.config.jsのエントリーオプション

 //入口文件的配置项
 entry:{ 
     //里面的entery是可以随便写的
    entry:'./src/entry.js'},

出力オプション(アウトレット設定)

//出口文件的配置项output:{ 
    //打包的路径名称
    path:path.resolve(__dirname,'dist'), //打包的文件名称 
    filename:'bundle.js' },

path.resolve(__dirname,'dist') //それだけですプロジェクトの絶対パスを取得します。

filename: はパッケージ化されたファイルの名前です。ここでは、bundle.js という名前を付けます。

このように書くと、「パスが見つかりません」というエラーが発生します。したがって、webpack.config.jsの先頭にパスを導入する必要があります

const path = require(‘path’);

次に、webpack.config.jsのコード:

const path = require('path');
module.exports={ 
//入口文件的配置项 entry:{ 
    entry:'./src/entry.js' }, 
//出口文件的配置项 output:{ 
//输出的路径，用了Node语法
 path:path.resolve(__dirname,'dist'), 
//输出的文件名称 filename:'bundle.js' }, 
//模块：例如解读CSS,图片如何转换，压缩 module:{}, 
//插件，用于生产模版和各项功能plugins:[], 
//配置webpack开发服务功能devServer:{}}

最後に、パッケージ化のためにターミナルにwebpackを入力します

マルチエントリとマルチ-exit 設定:

const path = require('path')    //path是一个常量不能更改  ，path 需要引入var webpack = require('webpack')
module.exports = {  // bundle入口
  entry:{
    entry:'./src/entry.js',    //下面的entry是随便起的名字
    entry2:'./src/entry2.js'    //有两个入口也要有两个出口
  },  // bundle输出
  output: {
    path: path.resolve(__dirname, 'dist'),    //绝对路径
    filename: '[name].js' //可重命名        当有多个入口文件时，出口文件用name，说明打包的出口文件和入口文件名相同
  },
  module:{},
  plugins:[],
  devServer:{}
}

注: エントリと終了の 2 か所が変更されました

[name] は、エントリ ファイルが複数ある場合、エントリ ファイルの名前に基づいて同じ名前にパッケージ化することを意味します。梱包することができます。

関連する推奨事項:

Webpack の複数エントリ ファイル ページのパッケージ化の詳細な説明

Webpack が構成ファイルを最適化する方法

以上がWebpack でファイルのエントリとファイルのエクスポートを構成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。