Was sollten Neulinge mit Webpack anfangen?

WebpackEinführungs-Tutorial(Studiennotizen)

1, Einleitung

Dieses Tutorial ist nicht ausführlich und entfernt viele komplexe Dinge. Der Datensatz besteht auch darauf, möglichst einfach zu sein, damit Anfänger ein allgemeines Verständnis von WebpackSie haben ein einfaches Verständnis des Systems, es ist besser, Webpack weiter zu studieren.

Webpack ist ein Javscript, webpack, analysiert automatisch die Abhängigkeiten zwischen den einzelnen Modulen und packt diese Abhängigkeiten dann in eine oder mehrere Dateien.

Das Mächtigste an Webpack

ist das Es kann offizielle und Drittanbieter-Plug-Ins passieren und Loader (Loader) werden zum Parsen und Kompilieren verschiedener Dateien verwendet.

Webpack

Die vier wichtigsten Kernkonzepte: Eingang( Eintrag ), Ausgabe(Ausgabe), Loader(Loader), Plug-in(Plugin), im Folgenden werde ich versuchen, einige davon zu erklären Die Bedeutung dieses Konzepts können Sie in der Dokumentation auf der offiziellen Website nachlesen.

2, Eingang(Eintrag)

Webpack Der Eintrag von

entspricht der index-Datei einer Webseite. Mit der Eintragsdatei weiß webpack, wo er anfangen soll dieser Eintrag Die Datei analysiert alle Dateien, von denen die Eintragsdatei abhängt, und packt dann alle abhängigen Dateien in eine oder mehrere Dateien.

Webpackbereitgestellt Einzeleintragssyntax und Objektsyntax sind enthalten. Die Single-Entry-Syntax ist auch die einfachste, mit nur einer Eintragsdatei, einer In- und einer Out-Datei. Zum Beispiel das untenstehende.

Die Objektsyntax gilt hauptsächlich für Anwendungen mit mehreren Seiten. Sie teilt dem

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

Webpack

mit, dass es drei Eintragsdateien gibt. Wenn die Verpackung abgeschlossen ist, gibt es auch drei Dateien, die unabhängig voneinander sind und jede Datei nur die Dateien enthält, von denen sie abhängt. Zum Beispiel:

 

 

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有一个系统的认识后，你就知道我该从哪里下手，该从哪里入手了。

 

 

 

 

Das obige ist der detaillierte Inhalt vonWas sollten Neulinge mit Webpack anfangen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!