webpack打包原理

一、什么是webpack

webpack 是一个模块打包机，将根据文件间的依赖关系对其进行静态分析。然后将这些模块按指定规则生成静态资源。

当webpack处理程序时，他会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

主要承担如下功能

• 打包：将多个文件打包成一个文件，减少服务器压力和下载贷款。

• 转换：将与编译语言转换成浏览器识别的语言

• 优化：性能优化
  webpack 特点：

• 代码拆分

  webpack 有两种组织模块的方式，异步，同步

  异步以来将作为分割点，形成一个新的块；在优化了依赖书之后，每一个异步区块都将 作为一个文件被打包

• 智能解析

  webpack有一个智能解析器，几乎可以处理任何第三方库

  无论他们的模块形式是Commonjs、AMD还是普通的JS文件；甚至在加载依赖的时候，允许使用动态表达式require（“./templates/”+name+"".jade）

• 快速运行
  webpack使用异步、多级缓存提高运行效率，使得webpack以难以令人置信得速度快速增量编译

核心概念

• 作用
  告诉webpack从哪个文件开始构建，这个文件将作为webpack依赖关系图得起点
• 配置单入口

//webpack配置
module.exports = {
	entry : '../path/file.js'
}

//webpack配置
	module.exports = {
	entry:{
		main:'./src/main.js'
	}
}

出口 output

• 出口output
• 作用
  告诉webpack在哪里输出构建后得包、包的名称等
• 配置单出口

//webpack配置
const path = require('path')

module.exports = {
	entry:'./src/main.js',
	output:{
		filename:'main.js',
		path:path.resolve(__dirname,'dist')
	}
};

六 核心概念：loader

• 作用
  loader让webpack能够去处理那些非javascript文件（webpack自身只理解javascript）

  loader可以将所有类型的文件转化为webpack能够处理的有效模块

• loader使用方式：配置（常用）

安装 loader
npm install --save-dev css-loader

//webpack配置
module.exports = {
	module:{
		rules:[{
			text:/\.css$/,
			use:['style-loader','.css-loader']
		}]
	}
}

• loader使用方式：内联（不常用）

import Style from 'style-loader!css-loader?modules!./styles.css';

• loader使用方式：CLI（不常用）

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

• loader特性
  • 几乎所有loader都需要安装，但不需要再webpack配置文件中通过require引入
  • 逆向编译，链式传递

// webpack 配置

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

// 如上，css 文件编译顺序依次为：postcss-loader ---> css-loader ---> style-loader
// 编译过程中，第一个loader的值 传递给下一个loader，依次传递；最后一个loader编译完成后，将预期值传递给 webpack

剩下内容下期分享！