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属性为对象，并且必须包含两个属性：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新手入门应该怎么做？的详细内容，更多请关注Work网其它相关文章！