由浅入深webpack - 02 webpack核心概念

[Pasoul]

Entry

• 代码的入口

• 打包的入口

• 单个或多个

如何定义一个entry：
01：入口是一个文件

module.exports = {
      entry: 'index.js'
}

02：入口是多个文件

module.exports = {
      entry: ['index.js', 'vendor.js']
}

03：为entry定义一个key，理解成一个独特的chunk（代码块）

module.exports = {
     entry: {
              index: ['index.js', 'app.js'],
              vendor: 'vendor.js'
     }
}

Output

• 打包成的文件(bundle)

• 一个或多个

module.exports = {
	entry: {
		index: 'index.js'
	},
	output: {
		filename: 'index.min.js'
	}
}

name为文件入口文件的名称，分别为index和vendor, hash是webpack为文件进行md5处理生成的字符串，5是指定字符串的长度，便于版本控制

module.exports = {
	entry: {
		index: 'index.js',
		vendor: 'vendor.js'
	},
	output: {
		filename: '[name].min.[hash:5].js'
	}
}

• 自定义规则
  定义publicPath，指定文件引用路径，可以关联cdn

Loaders

webpack可以使用loader对文件进行预处理，这允许你打包除js以外的任何静态资源，比如css-loader,可以把css变成js的模块，在js文件中引入进来

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

常用的loader

• 编译相关
  babel-loader、ts-loader

• 样式相关
  style-loader、css-loader、less-loader、sass-loader、postcss-loader

• 文件相关
  file-loader、url-loader

Plugins

插件参与到打包的整个过程中，目的在于处理loader无法处理的其他事情，比如

• 打包优化与压缩

var webpack = require('webpack');
module.exports = {
	plugins: [
		new webpack.optimize.UglifyJsPlugin()
	]
}

• 配置编译时的变量

常用的plugin

• 优化相关

  CommonsChunkPlugin：将公共模块拆分成一个独立的文件，会在最开始的时候加载一次，便缓存到浏览器中供后续使用
  UglifyjsWebpackPlugin：压缩、混淆js

• 功能相关
  ExtractTextWebpackPlugin：从一个或者多个bundle提取文本到独立的文件当中
  HtmlWebpackPlugin：生成html文件
  HotModuleReplacementPlugin：热更新插件
  CopyWebpackPlugin：把项目中已经用到的第三方库移动到打包好的目录中

名词

• Chunk代码块：webpack会把文件打包成一个个的chunk，CommonsChunkPlugin会把文件提取成单独的chunk，动态懒加载会把文件从bundle中提取出来，打包成chunk

• Bundle：打包后的文件，可以理解成一个或者多个chunk组成

• Module：模块，Loader可以把除js以外的文件处理成模块