heihei12305

1. 直接打包（在bash中）./node_modules/.bin/webpack

2. 在config.json中 的"scripts"中添加build: "webpack",然后执行 run build

原理：模块局部安装会在node_modules/.bin目录创建软链接

Entry 用来指定 webpack 的打包入口

1. 单入口

适合单页面

module.exports = {
	entry:'./path/to/my/entry/file.js'
};

2. 多入口

适合多页面场景

module.exports = {
	entry:{
		app:'./src/app.js',
		adminApp:'./src/adminApp.js'
	}
};

Output 用来告诉webpack如何将编译后的文件输出到磁盘

1. 单入口配置：

module.exports = {
	entry:'./path/to/my/entry/filr.js'
	output:{
		filename:'bundle.js',
		path:_dirname+'dist'
	}
}

2 多入口配置：

mudule.exports = {
	entry:{
		app:'./src/app.js',
		search:'./src/search.js'
	},
	output:{
		filename:'[name].js',  //通过占位符来确保文件名的唯一
		path:_dirname+'/dist'
	}
};

Loaders 本身是个函数，接受源文件作为参数，返回转换结果。

webpack 开箱即用只支持js和json两种文件类型，通过Loaders 去支持其他文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。

const path = require('path');

module.exports = {
	output: {
		filename:'bundle.js'
	},
	module: {
		rules:[
			{test:/\.txt$/,use:'raw-loader'} //test指定匹配规则，use指定使用的loader名称
		]
	}
};

Plugins 用于 bundle 文件的优化，资源管理和环境变量注入，作用于整个构建过程

const path = require('path');

module.exports = {
	output:{
		filename:'bundle.js'
	},
	plugins;[
		new HtmlWebpackPlugin({template:'./src/index.html'})//放到plugins数组里
	]
};

Mode 用来指定当前的构建环境是： production,development 还是 none

设置mode可以使用webpack内置的函数，默认值为production

• Mode的内置函数的功能