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

最新推荐文章于 2024-07-28 00:56:04 发布

DJCai7

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量163

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/DJCai7/article/details/97566078

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

环境搭建

安装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版本
安装node.js和npm
nvm install v10.15.3 安装最新版本node
检查是否安装成功: node -v, npm -v
安装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需要编译的原始文件, 包括路径及文件名------源代码

单入口: entry 是一个字符串

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

多入口: entry是一个对象

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

output

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

单入口, 直接指定path和filename

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

多入口, 通过占位符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

介绍
webpack原生只支持JS和JSON两种文件类型;
通过loaders可以将webpack原生不支持的其他文件类型转化为有效的模块,且可以添加到依赖图中;
本身是一个函数, 接收源文件作为参数, 返回转换的结果
常用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
用法介绍

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

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

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

介绍
mode用于指定当前的构建环境是: production / development / none
用法
使用webpack内置的函数进行设置, 默认值为production
内置函数的内置功能

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
不开启任何优化项