webpack 学习（小白篇）持续更新中，敬请关注。。。在前端开发过程中，webpack与我们的应用场景和开发方式息

持续更新中，敬请关注。。。

1.为什么要掌握webpack?

在前端开发过程中，webpack与我们的应用场景和开发方式息息相关。现在的前端已经不仅仅是只做pc端的网页开发了，随着各种移动设备的普及，前端就需要同时兼顾各种不同分辨率的网页开发。因此，针对不同的场景做不同的打包就显得尤为重要了。比如，对于公司内部的中后台系统，我们需要对单页应用进行打包，而对外用户而言的h5应用通常对于性能比较重视，因此需要通过打包构建来支持服务端渲染和PWA离线缓存。另一方面，在npm日益繁荣的今天，通过webpack可以快速复用各种优秀成熟的插件，来加速开发过程。最后一点，当前流行的前端三大框架，比如JSX和Vue指令这些，浏览器都是无法直接解析的，也需要构建工具进行转换。而webpack就是构建打包工具里的领跑者。学好webpack,可以拓宽技术栈，并且在构建打包过程中发现问题时，可以快速定位问题。

话不多说，现在跟着一起学习webpack吧。

2.webpack的基础用法

2.1 webpack之entry

Entry用来指定webpack的打包入口。

因为webpack是一个模块打包器，在webpack中，会把一切的资源（包括js,css这些代码资源，以及图片，字体这些非代码资源）当作模块来处理，有些模块之间会存在一些依赖关系，因此，webpack会根据入口文件来找依赖关系，生成依赖树，根据依赖树来打包资源。

单入口：entry 是一个字符串

适用于单页应用，也就是一个项目中只有一个入口文件。


module.exports = {
	entry: './src/main.js'
};

多入口：entry是一个对象

适合于多页应用

module.exports = {
  entry: {
  	app1: './src/app1.js',
    app2: './src/app2.js'
  }
};

2.2 webpack之output

output 用来告诉 webpack 如何将编译后的文件输出到磁盘（包括输出的目录及名称）。

对于单入口的场景,只需要指定 filename 和 path 这两个字段，如下：


module.exports = {
	entry: './src/main.js',
 	output: {
       filename: 'index.js',
       path: _dirname + '/dist'
   }
}

对于多入口的场景，可以通过占位符 [name] 确保文件名称的唯一，如下：


module.exports = {
  entry: {
   	 app1: './src/app1.js',
     app2: './src/app2.js'
  }
  output: {
  	filename: '[name].js',
    path: _dirname + '/dist'
  }
 }

2.3 webpack之Loaders

因为webpack开箱即用只支持 JS 和 JSON 两种文件类型，我们需要通过使用 Loaders 去支持其他文件类型并且转化成有效的模块，这样才能添加到依赖图中。

Loaders 的本质就是一个方法（函数），接收源文件作为参数，返回转换的结果给下一步使用

配置 Loaders 是放在 module 字段里，rules是个数组，可以配置多个loader

test 指定匹配规则

use 指定使用的 loader 名称


module.exports = {
  module: {
  	rules: [
      {
      	test: /\.css/,
        use: 'css-loader'
      }
    ]
  }
 }

常见的 Loaders :

css-loader : 加载.css文件，转换成commonJs对象

style-loader : 将css-loader解析后的内容以style标签的形式插入到head中

sass-loader : 将sass文件转换成css

babel-loader : 转换ES6以后的JS新语法

file-loader : 对图片，字体等资源进行打包

url-loader : 和file-loader功能差不多，除此之外，还可以设置较小图片自动转换base64（**limit **的单位是字节）

可以如下设置：


module.exports = {
  module: {
  	rules: [
      {
      	test: /\.(png|jpg|svg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
                limit: 10240
            }
          }
        ]
      }
    ]
  }
 }

thread-loader : 多进程打包JS和CSS（正常情况下webpack是单进程打包，thread-loader 以多进程进行打包，可以提高打包速度）

raw-loader : 将文件以字符串的形式导入（可以实现静态资源内联）

扩展：

loader的调用是链式调用，执行顺序是从右到左，以webpack 解析sass文件为例，先使用sass-loader将sass文件转换成css文件，然后使用css-loader加载转换后的css文件，最后使用style-loader将css-loader解析后的内容以style标签的形式插入到head中


module.exports = {
  module: {
  	rules: [
      {
      	test: /\.css/,
        use: [
        	'style-loader',
            'css-loader',
            'sass-loader'
        ]
      }
    ]
  }
 }

2.3 webpack之plugins

plugins 的作用是用来增强 webpack 功能，作用与整个构建过程，通常用于 bundle 文件的优化，资源管理以及环境变量注入。

常见的 Plugins :

ZipWebPackPlugin : 将打包的资源生成一个zip包

HtmlWebPackPlugin : 创建html文件承载输出的bundle

CleanWebPackPlugin : 清理构建目录

CommonsChunkPlugin : 将chunks相同的模块代码提取成公共js

UglifyWebPackPlugin : 压缩JS

Plugins在webpack中的配置如下：


module.exports = {
  plugins: [
    new HtmlWebPackPlugin({template: './src/index.html'})
  ]
 }

喜欢就给点个👍 吧，小小一个举动，可以让我这个程序媛开心一整天，笔芯。。。

webpack 学习 （小白篇）

webpack 学习（小白篇）