学习webpack--基础篇(2):webpack的核心概念

环境搭建

1. 安装nvm
   1.1 安装nvm(http://github.com/nvm-sh/nvm), 可通过如下两种方式安装
   通过curl安装: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh|bash
   通过wget安装: wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh|bash

   1.2 修改环境变量
   终端执行source ~/.bash_profile

   1.3 检查是否安装成功nvm
   终端执行nvm list , 若安装成功会显示安装的所有node版本

2. 安装node.js和npm
   nvm install v10.15.3 安装最新版本node
   检查是否安装成功: node -v, npm -v

3. 安装webpack和webpack-cli
   3.1 创建空目录和package.json
   mkdir my-project
cd my-project
npm init -y
   3.2 安装webpack和webpack-cli
   npm install webpack webpack-cli --save-dev 或 npm i webpack webpack-cli -D
   3.3 检查是否安装成功:
   ./node_modules/.bin/webpack -v

基本概念

entry

告诉webpack需要编译的原始文件, 包括路径及文件名------源代码

1. 单入口: entry 是一个字符串

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

2. 多入口: entry是一个对象

module.exports = {
	entry: {
		// 文件名: 文件路径
		app: './src/app.js',
		adimnApp: './src/adminApp.js'
	}
}

output

告诉webpack如何将编译后的文件输出到磁盘,指定编译后文件的目录及文件名-----结果代码

1. 单入口, 直接指定path和filename

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

2. 多入口, 通过占位符name确保文件名称的唯一
   name指定打包后文件的名称, 对应entry多入口情况下中的key值

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

loaders

1. 介绍
   webpack原生只支持JS和JSON两种文件类型;
   通过loaders可以将webpack原生不支持的其他文件类型转化为有效的模块,且可以添加到依赖图中;
   本身是一个函数, 接收源文件作为参数, 返回转换的结果
2. 常用loaders
   babel-loader: 转换ES6/ES7等JS新特性语法
   css-loader: 支持.css文件的加载和解析
   less-loader: 将less文件转化成css
   ts-loader: 将TS转化为JS
   file-loader: 进行图片/字体等的打包
   raw-loader: 将文件与字符串的形式导入
   thread-loader: 多进程打包JS和CSS
3. 用法介绍

const path = require('path')
module.exports = {
	entry: './src/main.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	module: {
		rules: [
			{
				test: /\.txt$/, // test 指定匹配规则
				use: 'raw-loader' // use 指定使用的loader名称
			}
		]
	}
}

plugins

1. 介绍
   插件, 作用于整个构建过程
   用于bundle文件(打包文件)的优化/资源管理/环境变量注入
   做loader做不了的事
2. 常用plugins有哪些
   CommonsChunkPlugin: 将chunks相同的模块代码提取成公共的js, 多应用于多页面打包
   CleanWebpackPlugin: 清理构建目录
   ExtractTextWebpackPlugin: 将CSS从bundle文件里提取成一个独立的css文件
   CopyWebpackPlugin: 将文件或者文件夹拷贝到构建的输出目录
   HtmlWebpackPlugin: 创建html文件去承载输出的bundle,不需打包后手动创建html文件
   UglifyjsWebpackPlugin: 压缩JS
   ZipWebpackPlugin: 将打包出的资源生成一个zip包
3. 用法介绍

const path = require('path')
module.exports = {
	entry: './src/main.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	plugins: [ // 需要用到的插件放到plugins数组里
		new HtmlWebpackPlugin({
			template: './src/index.html'
		})
	]
}

mode

1. 介绍
   mode用于指定当前的构建环境是: production / development / none

2. 用法
   使用webpack内置的函数进行设置, 默认值为production

3. 内置函数的内置功能

   3.1 development
   设置process.env.NODE_ENV的值为development,
   开启NamedChunksPlugin和NamedModulesPlugin

   3.2 production
   设置process.env.NODE_ENV的值为production,
   开启 FlagDependencyUsagePlugin/FlagIncludedChunksPlugin/ModuleConcatenationPlugin / NoEmitOnErrorsPlugin / OccurenceOrderPlugin / SideEffectsFlagPlugin / TerserPlugin,

   3.3 none
   设置process.env.NODE_ENV的值为none
   不开启任何优化项