Output, le concept de base du webpack-js tutoriel-php.cn

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 !

Output, le concept de base du webpack

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作为入口文件

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

Output, le concept de base du webpack

main.js

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

Copier après la connexion

index.html

    <script></script>

Copier après la connexion

packag.json

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

Copier après la connexion

接下来就是配置部分：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')
    },
}

Copier après la connexion

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

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

Copier après la connexion

2、filename

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

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

Copier après la connexion

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

Output, le concept de base du webpack

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

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

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

Copier après la connexion

打包后如图：

Output, le concept de base du webpack

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

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

vender.js：

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

Copier après la connexion

webpack.config.js：

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

Copier après la connexion

打包后如图：

Output, le concept de base du webpack

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

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

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

Copier après la connexion

[问题]这时候就会有个需求了，如何让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
	//...
}

Copier après la connexion

🎜🎜index.html🎜🎜

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

Copier après la connexion

🎜 🎜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

Copier après la connexion

🎜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

Copier après la connexion

🎜🎜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

Copier après la connexion

🎜🎜🎜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

Copier après la connexion

🎜Comme le montre la figure après l'emballage, un dist sera dossier généré automatiquement, il y a un fichier bundle.js 🎜🎜 Output, le concept de base du webpack

🎜🎜🎜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

Copier après la connexion

🎜Après packaging, il ressemble à ceci : 🎜🎜 Output, le concept de base du webpack

🎜🎜🎜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

Copier après la connexion

🎜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',
    },
 };

Copier après la connexion

🎜Packaging Comme indiqué ci-dessous : 🎜🎜 image. png

🎜🎜[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
	//...
}

Copier après la connexion

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

Copier après la connexion

由上面的例子所示，原本图片请求的地址是./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

Copier après la connexion

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

Copier après la connexion

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
```
Copier après la connexion
Copier après la connexion

应用

1、单个入口

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

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

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

Copier après la connexion

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

Copier après la connexion

HtmlWebpackPlugin

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

安装插件

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

Copier après la connexion

配置插件

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',
    },
 };

Copier après la connexion

打包

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

Output, le concept de base du webpack