webpack（二）入口和出口

mode模式

mode模式有两个值，分别是production、development。production是生产模式，development是开发模式，默认为production。

development 模式下，将侧重于功能调试和优化开发体验，包含如下内容：

1.浏览器调试工具
2.开发阶段的详细错误日志和提示
3.快速和优化的增量构建机制

production 模式下，将侧重于模块体积优化和线上部署：

1.开启所有的优化代码
2.更小的 bundle 大小
3.去除掉只在开发阶段运行的代码
4.Scope hoisting（作用域提升，使代码压缩的更小，运行更快） 和 Tree-shaking（去掉没有用的代码）
5.自动启用 uglifyjs 对代码进行压缩

entry（入口）

entry相当于大树的根一样，是所有js文件的入口，可以在这里引入，使用require和import引入都可以进行解析。
代码如下：

var path = require("path");
module.exports = {

	mode : "production",

	// entry : "./src/index.js",    //简写的写法
	entry : {
		index : "./src/index.js",    //这是一个入口文件
		a : ["./src/a.js","./src/index.js"]   //启动模块就有两个了,打包在一起
	},
}

entry 类型
entry的类型有三种，分别是字符串，数组以及对象。

output（出口）

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程.
代码如下：

output : {
		// path : "C:\\Users\\Administrator\\Desktop\\webpack\\04webpack入口出口\\ddist",     
		//打包文件的输出文件夹，必须是一个绝对路径.一般不会这么去写，项目可能会复制，粘贴(路径会发生变化)


		path : path.resolve(__dirname,"target"),

		// filename : "script/aaa/bbb/bundle.js",   //静态规则 默认放在dist文件夹中

		// 动态规则（一般是有多个入口文件）
		// filename : "[name].js"
		// filename : "[name]alskdfjlsdjf[name].js"


		// hash一般是用在文件名当中，避免缓存
		// filename : "[name].[hash:5].js"

		// chunkhash   
		filename : "[name].[chunkhash:3].js"


		// id   不推荐使用
		// filename : "[id].[chunkhash:3].js"
	}

在上面的示例中，我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。可能你想要了解在代码最上面导入的 path 模块是什么，它是一个 Node.js 核心模块，用于操作文件路径。

1.path
path是配置输出文件存放在本地的目录，字符串类型，是绝对路径
__dirname当前文件所在的文件夹的名字
path : “C:\Users\Administrator\Desktop\webpack\04webpack入口出口\ddist”,
//打包文件的输出文件夹，必须是一个绝对路径.一般不会这么去写，项目可能会复制，粘贴(路径会发生变化)

2.filename:
filename 这个是输出文件的名称，字符串类型
静态规则 “script/aaa/bbb/bundle.js”
动态规则（一般是用于多个入口文件）
[name] 文件名产生映射的规则
[hash] 大的打包任务对应的hash
[chunkhash] 里面每个chunk都有自己独立的hash
[id] 不推荐使用，开发模式是个字符串，生产环境就变成了数字