【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-loader	less转成css
ts-loader	ts转成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决定优化的模式
}