Comment configurer la saisie et l'exportation de fichiers dans Webpack

Ce que cet article vous apporte concerne les méthodes de configuration de la saisie et de l'exportation de fichiers dans webpack. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Créez un fichier js sous le nom webpack.config.js, qui est le fichier de configuration de l'entrée Webpack
webpack.config.js

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

• . : Configurez l'adresse du fichier d'entrée, qui peut être une entrée unique ou plusieurs entrées.

• sortie : Configurez l'adresse du fichier d'exportation Après la version webpack2.X, la configuration multi-exportation est prise en charge.

• module : module de configuration, principalement pour des fonctions telles que l'analyse CSS et la conversion et la compression d'images.

• plugins : Configurez les plug-ins, configurez les plug-ins avec différentes fonctions selon vos besoins.

• devServer : configurez la fonction du service de développement, nous l'expliquerons en détail plus tard.

option de saisie (configuration de la saisie)

• option de saisie dans wepback.config.js

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

option de sortie (configuration d'exportation)

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

path.resolve(__dirname,'dist') //Est d'obtenir le chemin absolu du projet.

filename : est le nom du fichier empaqueté, ici nous le nommons bundle.js.
Si vous l'écrivez simplement ainsi, vous obtiendrez une erreur : le chemin est introuvable. Il faut donc introduire le chemin

const path = require(‘path’);

en tête de webpack.config.js Maintenant le code de 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:{}}

. Enfin dans le terminal Entrez le webpack pour le packaging

Configuration multi-entrées et multi-sorties :

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:{}
}

Remarque : Deux endroits ont été modifiés : modifications d'entrée et de sortie

[nom] signifie le regrouper sous le même nom en fonction du nom du fichier d'entrée. S'il y a plusieurs fichiers d'entrée, plusieurs fichiers peuvent être empaquetés.

Recommandations associées :

Explication détaillée de l'empaquetage des pages de fichiers multi-entrées Webpack

Comment Webpack optimise les fichiers de configuration

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!