Output, le concept de base du webpack

Après avoir rassemblé tous les éléments, vous devez également indiquer à Webpack où empaqueter l'application. L'attribut de sortie de webpack décrit comment gérer le code groupé. L'article suivant vous donnera une compréhension approfondie de la sortie (Output) dans le concept de base de webpack. J'espère qu'il vous sera utile !

Sortie : la configuration de l'option de sortie peut contrôler la manière dont Webpack écrit les fichiers compilés sur le disque dur. Notez que même s'il peut y avoir plusieurs points d'entrée, une seule une configuration de sortie est spécifiée.

Démarrer

---

Nous initialisons d'abord un projet avec npm init, installons webpack et webpack-cli localement, puis créons dans le répertoire racine des dossiers index.html, webpack.config.js et src, créez un autre main.js à l'intérieur du code du dossier>Comme fichier d'entrée
npm init初始化一个项目，本地安装webpack和webpack-cli，然后在根目录创建index.html、webpack.config.js和src文件夹，在文件夹内再创建一个main.js作为入口文件

准备工作完成后如图所示：

main.js

function Component(){
    var div=document.createElement('div')
    div.innerHTML="来一起学习出口配置吧~"
    return div
}
document.body.appendChild(Component())

index.html

    <script></script>

packag.json

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build":"webpack" //加上
},

接下来就是配置部分：webpack.config.js

输出（Output)）

---

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。

注意，即使可以存在多个入口起点，但只指定一个输出配置

下面是输出配置的几个概念：

1、path

path指定资源输出的位置，要求值必须为绝对路径，如：

const path=require('path')
module.exports={
    entry:'./src/main.js',
    output:{
        filename:'bundle.js',
        //将资源输出位置设置为该项目的dist目录
        path: path.resolve(__dirname, 'dist')
    },
}

在Webpack 4之后，output.path已经默认为dist目录。除非我们需要更改它，否则不必单独配置，所以如果是webpack4以上，你可以写成：

module.exports={
    entry:'./src/main.js',
    output:{
        filename:'bundle.js',
    },
}

2、filename

filename的作用是控制输出资源的文件名，其形式为字符串。在这里我把它命名为bundle.js，意为我希望资源输出在一个叫bundle.js的文件中：

module.exports={
    entry:'./src/main.js',
    output:{
        filename:'bundle.js',
    },
}

打包后如图，会自动生成一个dist文件夹，里面有个bundle.js文件

filename可以不仅仅是bundle的名字，还可以是一个相对路径

即便路径中的目录不存在也没关系，Webpack会在输出资源时创建该目录，比如：

  module.exports = {
    output: {
      filename: './js/bundle.js',
    },
  };

打包后如图：

在多入口的场景中，我们需要对产生的每个bundle指定不同的名字，Webpack支持使用一种类似模板语言的形式动态地生成文件名

在此之前，我们再去src中创建一个新的入口文件

vender.js：

function Component(){
    var div=document.createElement('div')
    div.innerHTML="我是第二个入口文件"
    return div
}
document.body.appendChild(Component())

webpack.config.js：

module.exports = {
    entry:{
        main:'./src/main.js',
        vender:'./src/vender.js'
    },
    output: {
      filename: '[name].js',
    },
 };

打包后如图：

filename中的[name]会被替换为chunk name即main和vender。因此最后会生成vendor.js与main.js

此时如果你希望看到内容，你还需在index.html中改下内容，将路径对应上最后打包出来的bundle

    <script></script>
    <script></script>

[问题]这时候就会有个需求了，如何让index.html自动帮我们将生成的bundle添加到html中呢？这里可以用到插件 HtmlWebpackPlugin，详细看下方

3、其他

除了[name]可以指代chunk name以外，还有其他几种模板变量可以用于filename的配置中：

• [hash]：指代Webpack此次打包所有资源生成的hash
• [chunkhash]：指代当前chunk内容的hash
• [id]：指代当前chunk的id
• [query]：指代filename配置项中的query

它们可以：控制客户端缓存

[hash]和[chunkhash]都与chunk内容直接相关，如果在filename中使用，当chunk的内容改变时，可以同时引起资源文件名的更改，从而使用户在下一次请求资源文件时会立即下载新的版本而不会使用本地缓存。

[query]

Une fois le travail de préparation terminé, il se présente comme indiqué sur la figure :

main.js

🎜

import Img from './img.jpg';
function component() {
    //...
    var img = new Image();
    myyebo.src = Img //请求url
	//...
}

🎜🎜index.html🎜🎜

        {
          //...
          query: {
            name: '[name].[ext]',
            outputPath: 'static/img/',
            publicPath: './dist/static/img/'
          }
        }

🎜 🎜packag.json 🎜🎜

//假设当前html地址为：https://www.example.com/app/index.html
//异步加载的资源名为 1.chunk.js
pubilicPath:"" 		//-->https://www.example.com/app/1.chunk.js
pubilicPath:"./js" 	//-->https://www.example.com/app/js/1.chunk.js
pubilicPath:"../assets/"  	//-->https://www.example.com/assets/1.chunk.js

🎜L'étape suivante est la partie configuration : webpack.config.js🎜🎜🎜Output)🎜🎜🎜🎜L'option de configuration output peut contrôler la façon dont le webpack écrit compilé fichiers sur le disque dur.
🎜🎜Notez que même s'il peut y avoir plusieurs points de départ entrée, une seule configuration sortie est spécifiée🎜🎜Voici plusieurs concepts de configuration de sortie :🎜 🎜🎜 🎜1. path🎜🎜🎜🎜🎜path spécifie l'emplacement de sortie de la ressource. La valeur requise doit être un chemin absolu🎜, tel que : 🎜

//假设当前html地址为：https://www.example.com/app/index.html
//异步加载的资源名为 1.chunk.js
pubilicPath:"/" 	//-->https://www.example.com/1.chunk.js
pubilicPath:"/js/" 	//-->https://www.example.com/js/1.chunk.js

🎜🎜Après Webpack 4, output.path est défini par défaut sur le répertoire dist🎜. . À moins que nous n'ayons besoin de le modifier, il n'est pas nécessaire de le configurer séparément, donc s'il s'agit de webpack4 ou supérieur, vous pouvez écrire : 🎜

//假设当前html地址为：https://www.example.com/app/index.html
//异步加载的资源名为 1.chunk.js
pubilicPath:"http://cdn.com/" 	//-->http://cdn.com/1.chunk.js
pubilicPath:"https://cdn.com/"	//-->https://cdn.com/1.chunk.js
pubilicPath:"//cdn.com/assets"	//-->//cdn.com/assets/1.chunk.js

🎜🎜🎜2, filename🎜🎜🎜🎜La fonction du nom de fichier est de 🎜contrôler le fichier nom de la ressource de sortie🎜, qui se présente sous la forme d'une chaîne de caractères. Ici, je l'ai nommé bundle.js, ce qui signifie que je veux que les ressources soient sorties dans un fichier appelé bundle.js : 🎜

module.exports={
    entry:'./src/main.js',
    output:{
        filename:'bundle.js',
    },
}
//webpack4以后dist会默认生成，于是这里省略了path

🎜Comme le montre la figure après l'emballage, un dist sera dossier généré automatiquement, il y a un fichier bundle.js 🎜🎜🎜🎜🎜le nom de fichier peut non seulement être le nom du bundle, mais aussi un chemin relatif🎜🎜🎜Peu importe même si le répertoire dans le chemin n'existe pas, Webpack Ce répertoire sera créé lors de la sortie des ressources, par exemple : 🎜

module.exports={
    entry: {
      main: './src/main.js',
      vender: './src/vender.js'
    },
    output: {
      filename: '[name].js',
      path: __dirname + '/dist/assets' //指定打包后的bundle放在/dist/assets目录下
    }
  }
// 打包后生成：./dist/assets/main.js, ./dist/assets/vender.js

🎜Après packaging, il ressemble à ceci : 🎜🎜🎜🎜🎜Dans un scénario à entrées multiples🎜, nous devons spécifier un nom différent pour chaque bundle généré. 🎜Webpack prend en charge l'utilisation d'un langage de modèle similaire. Générez dynamiquement des noms de fichiers sous la forme🎜🎜🎜Avant cela, nous créons un nouveau fichier d'entrée dans src🎜🎜vender.js : 🎜

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

🎜webpack. config.js : 🎜

const HtmlWebpackPlugin=require('html-webpack-plugin') //加载模块
module.exports = {
    entry:{
        main:'./src/main.js',
        vender:'./src/vender.js'
    },
    //添加插件
    plugins:[
        new HtmlWebpackPlugin({
            title:'output management'
        })
    ],
    output: {
      filename: '[name].js',
    },
 };

🎜Packaging Comme indiqué ci-dessous : 🎜🎜🎜🎜[name] dans le nom de fichier sera remplacé par le nom du morceau, à savoir principal et fournisseur. Par conséquent, vendor.js et main.js seront générés à la fin. Si vous souhaitez voir le contenu à ce moment-là, vous devez toujours ajouter index. .html Modifiez le contenu au milieu et faites correspondre le chemin d'accès au dernier bundle emballé🎜rrreee

🎜[Question] Il sera nécessaire à ce moment-là, comment laisser index.html code> nous aide automatiquement à générer le fichier Qu'en est-il de l'ajout d'un bundle au HTML ? Le plug-in HtmlWebpackPlugin peut être utilisé ici, voir ci-dessous pour plus de détails🎜

🎜🎜🎜3 Autres🎜🎜🎜🎜En plus de [name] qui peut faire référence au nom du morceau, ici. existe plusieurs autres variables de modèle. Peuvent être utilisées dans la configuration du nom de fichier : 🎜

• [hash] : fait référence au hachage généré par Webpack pour empaqueter toutes les ressources cette fois
• [chunkhash] : fait référence au hachage du contenu du chunk actuel
• li>
• [id] : fait référence à l'identifiant du chunk actuel
• [query] : fait référence à la requête dans le nom du fichier élément de configuration

🎜Ils peuvent :🎜Contrôler le cache du client 🎜🎜🎜[hash] et [chunkhash] sont directement liés au contenu du chunk . S'il est utilisé dans le nom de fichier, lorsque le contenu du bloc change, le fichier de ressources peut être modifié en même temps, de sorte que la prochaine fois que l'utilisateur demandera le fichier de ressources, la nouvelle version sera téléchargée immédiatement sans utiliser la version locale. cache. 🎜🎜[query] peut également avoir un effet similaire, mais cela n'a rien à voir avec le contenu du fragment et doit être spécifié manuellement par le développeur. 🎜🎜🎜🎜4, chemin public🎜🎜🎜

publicPath是一个非常重要的配置项，用来指定资源的请求位置

以加载图片为例

import Img from './img.jpg';
function component() {
    //...
    var img = new Image();
    myyebo.src = Img //请求url
	//...
}

        {
          //...
          query: {
            name: '[name].[ext]',
            outputPath: 'static/img/',
            publicPath: './dist/static/img/'
          }
        }

由上面的例子所示，原本图片请求的地址是./img.jpg，而在配置上加上publicPath后，实际路径就变成了了./dist/static/img/img.jpg，这样就能从打包后的资源中获取图片了

publicPath有3种形式：

• HTML相关

  我们可以将publicPath指定为HTML的相对路径，在请求这些资源时会以当前页面HTML所在路径加上相对路径，构成实际请求的URL

  //假设当前html地址为：https://www.example.com/app/index.html
  //异步加载的资源名为 1.chunk.js
  pubilicPath:"" 		//-->https://www.example.com/app/1.chunk.js
  pubilicPath:"./js" 	//-->https://www.example.com/app/js/1.chunk.js
  pubilicPath:"../assets/"  	//-->https://www.example.com/assets/1.chunk.js

• Host相关

  若publicPath的值以“/”开始，则代表此时publicPath是以当前页面的host name为基础路径的

  //假设当前html地址为：https://www.example.com/app/index.html
  //异步加载的资源名为 1.chunk.js
  pubilicPath:"/" 	//-->https://www.example.com/1.chunk.js
  pubilicPath:"/js/" 	//-->https://www.example.com/js/1.chunk.js

• CDN相关

  上面两个都是相对路径，我们也可以使用绝对路径的形式配置publicPath

  这种情况一般发生于静态资源放在CDN上面时，由于其域名与当前页面域名不一致，需要以绝对路径的形式进行指定

  当publicPath以协议头或相对协议的形式开始时，代表当前路径是CDN相关

  //假设当前html地址为：https://www.example.com/app/index.html
  //异步加载的资源名为 1.chunk.js
  pubilicPath:"http://cdn.com/" 	//-->http://cdn.com/1.chunk.js
  pubilicPath:"https://cdn.com/"	//-->https://cdn.com/1.chunk.js
  pubilicPath:"//cdn.com/assets"	//-->//cdn.com/assets/1.chunk.js

应用

---

1、单个入口

在 webpack 中配置 output 属性的最低要求是将它的值设置为一个对象，包括以下两点：

• filename 用于输出文件的文件名。
• 目标输出目录 path 的绝对路径

module.exports={
    entry:'./src/main.js',
    output:{
        filename:'bundle.js',
    },
}
//webpack4以后dist会默认生成，于是这里省略了path

2、多个入口

如果配置创建了多个单独的 "chunk"，则应该使用占位符来确保每个文件具有唯一的名称

这里用到了上面所讲的filename的[name]

另外，如果想将这些资源放进指定的文件夹，可以加上path配置

module.exports={
    entry: {
      main: './src/main.js',
      vender: './src/vender.js'
    },
    output: {
      filename: '[name].js',
      path: __dirname + '/dist/assets' //指定打包后的bundle放在/dist/assets目录下
    }
  }
// 打包后生成：./dist/assets/main.js, ./dist/assets/vender.js

HtmlWebpackPlugin

---

本章上方遗留的问题可以通过使用插件HtmlWebpackPlugin解决

安装插件

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

配置插件

const HtmlWebpackPlugin=require('html-webpack-plugin') //加载模块
module.exports = {
    entry:{
        main:'./src/main.js',
        vender:'./src/vender.js'
    },
    //添加插件
    plugins:[
        new HtmlWebpackPlugin({
            title:'output management'
        })
    ],
    output: {
      filename: '[name].js',
    },
 };

打包

打包完成后你会发现dist中出现了一个新的index.html,上面自动帮我们添加所生成的资源，打开后会发现浏览器会展示出内容

这意味着，以后初始化一个项目就不必写index.html了

源码可从这里获取：

https://sanhuamao1.coding.net/public/webpack-test/webpack-test/git/files

更多编程相关知识，请访问：编程视频！！

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!