Par quoi les débutants devraient-ils commencer avec Webpack ?

WebpackTutoriel d'introduction(Notes d'étude)

1, Introduction

Ce tutoriel n'est pas approfondi et supprime beaucoup de choses complexes. La notice insiste également sur le fait d'être la plus simple, afin que les débutants puissent avoir une compréhension générale de webpackAyez une compréhension simple du système, et il est préférable d'approfondir l'étude du webpack.

Webpack est un Javscript, webpack analysera automatiquement les dépendances entre chaque module, puis conditionnera ces dépendances dans un ou plusieurs fichiers.

La chose la plus puissante à propos du webpack

est que il peut passer Des plug-ins et des chargeurs officiels et tiers (loader) sont utilisés pour analyser et compiler divers fichiers.

Webpack

Les quatre concepts de base les plus importants : Entrée( entrée ), sortie(sortie), chargeur(chargeur), plug-in(plugin), ci-dessous je vais essayer d'en expliquer quelques-uns en prenant notes. La signification de ce concept Si vous souhaitez approfondir ou si vous ne comprenez pas quelque chose dans vos notes, vous pouvez le vérifier dans la documentation sur le site officiel.

2, entrée(entrée)

webpack L'entrée de

est équivalente au fichier index d'une page web. Avec le fichier d'entrée, webpack saura par où commencer webpack. cette entrée Le fichier analyse tous les fichiers dont dépend le fichier d'entrée, puis regroupe tous les fichiers dépendants dans un ou plusieurs fichiers.

webpack

fourni La syntaxe à entrée unique et la syntaxe d'objet sont incluses. La syntaxe à entrée unique est également la plus simple, avec un seul fichier d'entrée, un en entrée et un en sortie. Par exemple, celui ci-dessous.

1 {2   entry: './index.js'3 }

La syntaxe des objets est principalement destinée aux applications comportant plusieurs pages. Elle indique au

webpack qu'il existe trois fichiers d'entrée. Lorsque Le packaging est terminé, il existe également trois fichiers. Ces trois fichiers sont indépendants les uns des autres, et chaque fichier ne contient que les fichiers dont il dépend. Par exemple :

 

 

3、输出(output)

webpack提供了output属性，来控制webpack如何把编译好的文件写入到硬盘中，输入和输出是对应的，有输入就有输出。但是必须注意一点，可以存在多个输入，但是只能存在一个输出，那怎么来输出多个独立的编译好的文件呢？webpack中当然有应对的机制。

 

webpack要求output属性为对象，并且必须包含两个属性：filename、path。顾名思义filename即输出文件的文件名，而path则为输出文件的绝对路径(注意,path必须为决定路径)。

 

单个入口output属性写法：

1 {2     entry: './index.js',3     output: {4     　　path: path.resolve(__dirname, 'app'), //path为nodejs自身的库。__dirname为nodejs在运行过程中的一个环境变量，里面是当前文件夹的完整目录名。resolve方法是把相对路径的app目录解析为一个决定路径。5 6   　　　filename: 'bundle.js'7  }8 }

 

webpack内置了多个变量来应对多个入口文件，如[name]、[hash]、[id]、[chunkhash]，通过变量来保证每个文件的唯一性来达到生成多个文件，在生成过程中webpack会把这几个变量替换为相应的字符串用于保证文件的唯一性。

 

多个入口output属性写法：

1 {2     entry: './index.js',3     output: {4         path: path.resolve(__dirname, 'app'),5         filename: [name]-[hash]-bundle.js6      }7 }

 

 

4、加载器(loader)

loader可以对不同类型的文件进行编译转换，比如jsx、typescript直接拿在浏览器上运行是不能运行的，那么我们在编写程序的时候需要借助jsx以及typescript等高效的库来提高我们编写程序的效率，但是我们又需要能正常使用，如果每种文件类型我们都通过一种转换工具，那么就显的很麻烦，所以laoder就是来处理这样的工作。

 

首先在使用loader的时候我们需要安装相应的插件，比如es2015，那我们安装babel-loader，如果是css，那我们安装css-loader，通过下面的module属性里面的rules数组来对需要转换的文件设置loader。

 

 1 { 2     entry: './index.js', 3     output: { 4         path: path.resolve(__dirname, 'app'), 5         filename: [name]-[hash]-bundle.js 6     }, 7     module: { 8         rules : [ 9             {test: /\.js$/, use: 'babel-loader'}10          ]11      }12 }

 

上面的rules是一个数组，每个元素是一个对象，对象里面包含了两个属性test、use，test的值是一个正则表达式，它的作用是将当前loader用于什么文件，这里正则表达式就是用来匹配你需要转换的文件类型，use是当前匹配到的文件用什么加载器来转换、编译。

 

有三种方式来使用loader加载器

1、webpack配置文件

2、require语句中使用

3、通过命令行使用

 

第一种上面我们已经说了，下面简单的介绍一下第二种和第三种，第二种使用方法是我们在require或者import文件的时候可以直接使用，比如下面的代码：

 

1 require('babel-loader!./hello.js')

或者

1 Import('babel-loader!./hello.js')

 

第三种方式是直接通过webpack提供的命令行工具—module-bind使用，比如下面的代码：

1 webpack —module-bind 'js=babel-loader'

 

5、插件(plugin)

插件用于解决loader无法解决的事情，比如给每个js文件进行添加著作标记、压缩文件等功能，每个插件都可能有参数选项，每个插件在使用的时候也必须使用new操作符来建立一个插件的实例。插件通过plugins属性来设置，plugins是一个数组，每个元素代表一个插件的实例。因为插件有官方的还有第三方的，所以不会一一去说怎么使用，只是给大家简单演示一下，大家需要用到哪个插件再去查这个插件的api。

 

 1 const HtmlWebpackPlugin = require('html-webpack-plugin'); 2 //首先要使用插件，必须先引入插件 3   4 { 5 　　entry: './index.js', 6 　　output: { 7　　　　path: path.resolve(__dirname, 'app'), 8　　　　filename: [name]-[hash]-bundle.js 9  　　},10　　 module: {11   　　rules : [12    　　　　{test: /\.js$/, use: 'babel-loader'}13   　　]14  　　},15  　 plugins: [16   　　new HtmlWebpackPlugin({telmplate : './index.html'})  //通过plugins来使用你需要使用插件。17  　　]18 }

6、总结

通过上面的学习，你可以了解到webpack的四个核心，入口、输出、加载器、插件，入口就是你要编译的是哪个文件，指定了过后webpack会自行寻找依赖的文件打包编译。输出就是编译转换好了过后把文件写入到硬盘的哪里。加载器就是对不同类型的文件转换，从而让浏览器能直接运行。插件做的是loader无法解决的事情。

 

 

其实webpack的配置并没有想象中的那么复杂，webpack的配置文件就是一个js文件，只要对webpack有一个系统的认识后，你就知道我该从哪里下手，该从哪里入手了。

 

 

 

 

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!