Webpack新手入门教程(学习笔记)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack新手入门教程(学习笔记)相关的知识,希望对你有一定的参考价值。

Webpack入门教程(学习笔记)

1、简介

此教程涉及不深入,并除去了很多复杂的东西,记录也坚持以最简单为主,让初学者大概对webpack有一个简单的系统认识,更好的去进一步深入学习webpack

 

Webpack是一个Javscript的打包程序,webpack会自动分析每个模块之间的依赖,然后将这些依赖统一打包成一个或多个文件。

 

webpack最强悍的地方是可以通过官方、第三方的插件以及加载器(loader)来实现对各种文件的解析、编译。

 

Webpack最重要的四个核心概念:入口(entry)、输出(output)、加载器(loader)、插件(plugin),下面我以做笔记的方式尽量说明几个概念的意思,如果想深入或者笔记中有不太明白的地方,可以到官方网站的文档中去查看。

 

2、入口(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属性为对象,并且必须包含两个属性:filenamepath。顾名思义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.js
6      }
7 }

 

 

4、加载器(loader)

loader可以对不同类型的文件进行编译转换,比如jsxtypescript直接拿在浏览器上运行是不能运行的,那么我们在编写程序的时候需要借助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是一个数组,每个元素是一个对象,对象里面包含了两个属性testusetest的值是一个正则表达式,它的作用是将当前loader用于什么文件,这里正则表达式就是用来匹配你需要转换的文件类型,use是当前匹配到的文件用什么加载器来转换、编译。

 

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

1webpack配置文件

2require语句中使用

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新手入门教程(学习笔记)的主要内容,如果未能解决你的问题,请参考以下文章

webpack学习笔记一(入门)

Webpack简易入门教程

Webpack 学习笔记

webpack4 系列教程: 前言

webpack 学习笔记

TypeScript教程# 6:使用webpack打包ts代码