초보자가 Webpack을 시작하려면 무엇을 시작해야 합니까?

Webpack시작하기 튜토리얼(학습 노트)

1 , 소개

이 튜토리얼은 없습니다 -깊이. 또한 복잡한 것을 많이 제거하고 기록도 가장 단순함을 고집하므로 초보자가 webpack에 대한 간단한 시스템 이해를 갖고 webpack을 더 잘 배울 수 있습니다.

Webpack은 Javscript용 패키징 프로그램입니다. webpack은 각 모듈 간의 종속성을 자동으로 분석한 다음 이러한 종속성을 하나 이상의 파일로 패키징합니다. webpack의 가장 강력한 점은 공식 및 타사 플러그인과 로더를 통해 다양한 파일을 구문 분석하고 컴파일할 수 있다는 것입니다.

Webpack

4가지 가장 중요한 핵심 개념: 항목

(입력), 출력(출력), 로더(로더), 플러그인(플러그인), 아래에서는 노트를 통해 여러 개념의 의미를 설명하려고 합니다. 더 자세히 알고 싶거나 노트에서 명확하지 않은 부분이 있으면 공식 웹사이트의 문서에서 확인할 수 있습니다.

2、entry(entry)

webpack

의 입구는

index과 동일합니다. 항목 파일이 있는 웹 페이지 파일, webpack은 시작 위치를 알게 됩니다. webpack은 이 항목 파일을 기반으로 항목 파일이 의존하는 모든 파일을 분석한 다음 모든 종속 파일을 하나 이상의 파일로 패키징합니다. 파일.

webpack은 단일 항목 구문과 개체 구문을 제공합니다. 단일 항목 구문은 하나의 항목 파일, 즉 하나의 항목과 하나의 항목만 포함하는 가장 간단한 구문이기도 합니다. 예를 들어, 아래의 것입니다.

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

객체 구문은 주로 여러 페이지가 있는 애플리케이션에 사용됩니다. webpack에 패키징이 완료되면 이 세 파일도 서로 독립적이라는 것을 알려줍니다. . 각 파일에는 종속된 파일만 포함됩니다. 예:

1  {2   entry: {3    hello1: './hello1.js',4    hello2: './hello2.js'5   }6  }

 

 

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

 

 

 

 

위 내용은 초보자가 Webpack을 시작하려면 무엇을 시작해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!