【webpack】2-基本概念entry、output、loaders、plugins、mode

entry

用来指定webpack以哪个文件作为入口起点进行打包,分析构建内部依赖图。

用法

单入口,也就是一个文件:

module.exports = {
	entry: './src/main.js' // 字符串形式
}

多入口,也就是多个文件,有两种形式,第一种是数组的形式,不推荐,因为会都统一打包成一个文件:

module.exports = {
	entry: ['./src/main.js', './src/login.js']
}

第二种是对象新式,分开打包,有简写方式和完整的写法方式

module.exports = {
	entry: {  // 对象形式(简写)
		app: './src/main.js',
		login: './src/login.js'
	}
	entry: {  // 对象形式(完整)
		login: {
			import: './src/login.js',
		},
		app: {
			import: './src/main.js',
			filename: 'app.js', // 打包文件名称
			dependOn: ['react-vendor', 'other-vendor'] // 可以选择把这个引入文件里的第三方库单独打包出来,里面数组写的是单独打包后的文件名称
		},
		'react-vendor': ['react', 'redux'], // 然后这里对文件里指定打包什么库,例如打包出来的react-vendor文件,里面就包含了react,redux
		'other-vendor': ['js-base']
	}
}

不过单独打包第三方库的方式一般不会在这里去配置,都会单独在其他地方配,后面的文章会讲


output

用来告诉webpack编译后的文件要怎么输出

用法

单入口:

const path = require('path') // 导入node自带的path模块

module.exports = {
	output: { // 编译完后输出设置
		path: path.resolve(__dirname, './dest'), // 输出文件的绝对路径,__dirname表示根目录,第二个参数表示文件名
		filename: 'bundle.js', // 生成的文件名,如果想再创建文件夹,可以'js/bundle.js'
		chunkFilename: 'asset_[id].js' // 有些懒加载的文件不是会单独打包成一个文件吗,这个就是给单独打包的懒加载文件重命名的,[id]的意思是webpack会默认生成一个文件id,你可以加在文件名称里,如示例
	}
}

多入口:

const path = require('path')

module.exports = {
	output: { 
		path: path.resolve(__dirname, './dest'),
		filename: '[name].js' // 以入口文件命名作为区分(占位符用法)
	}
}

多入口的打包出来后会分为对应的多个文件,例如index.js和login.js,我们运行打包好后的工程,在控制台的网络中可以看到,当我们访问index.js入口的页面,只会去拉取index.js。同样,当我们访问login.js入口的页面,只会去拉取login.js。

这里对两个路径配置做科普:

  • path:打包文件的放置位置,要为绝对路径
  • publicPath:按需加载或者静态资源的位置,默认相对路径也可以为绝对路径

publicPath这个玩意很重要,因为打包后的文件里index.html对文件(图标、script标签)的引入地址可能是不对的(本地能跑,线上就说获取不到文件),需要我们重新调整。

我的实践是两种方法,要么直接写你们线上的前端静态文件地址:https://xxxx.com/sds,要么写相对地址/sds


loaders

loaders可以理解为webpack的翻译员,webpack乞丐版(就是你刚新建的webpack工程)只支持js和json两种文件类型(也就是只有两个分别能翻译js和json的翻译员),后续需要懂得读取css,less等文件类型,就需要添加相对应的翻译员了。同时这些翻译员身上有着各自的一些技能,等以后慢慢使用多了就能理解啥意思了。

严格来讲,通过loaders去拓展支持其他文件类型并转换成有效模块,添加进依赖树中。它本身是一个函数,接受源文件作为参数、返回转换的结果。(这句话不懂没关系,懂上面的就可以了)

常用loaders

名称描述
babel-loader转换es6或以上新特性语法
css-loader支持css文件的加载和解析
less-loaderless转成css
ts-loaderts转成js
file-loader进行图片、字体等的打包
raw-loader将文件以字符串的形式导入
thread-loader多进程打包js和css

用法

const path = require('path')

module.exports = {
	module: {
		rules: [
			{ test: /\.txt$/, use: 'raw-loader' }, // test指定匹配规则、use指定使用的loader名称			
			{ test: /\.css$/, use: ['css-loader', 'style-loader'] } // 可以同时指定多个loader
		]
	}
}

plugins

就理解为给webpack加dlc,加功能。

严格来讲:插件用于bundle文件的优化,资源管理和环境变量注入,作用于整个构建过程。

常用plugins

这个就先不记了,需要的时候百度看看(懒人啊)。

用法

module.exports = {
	plugins: [
		new HtmlWebpackPlugin({template: './src/index.html'}) // 以new的形式
	]
}

loader和plugin的区别

结合上面提到概念的解释,简要来说loader是个模块转换器,plugin是个扩展插件。


mode

用来指定当前的构建环境是:production、development还是none

设置mode可以自动使用webpack内置的函数,开启相对应的插件。默认值为production。

三者区别,自动开启的插件是不一样的:

  • none不优化。
  • development开发者模式,帮助输出调试信息。
  • production生产模式,最高优化,启用压缩,忽略错误。

使用

// 定义JS的打包规则
module.exports = {
	mode: 'development', // mode决定优化的模式
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值