webpack详解

bundle.js文件
断点执行文件。
理解她的工作机制和原理。

如何通过loader实现特殊文件的加载？
为什么用 js 文件作为入口文件？

为什么在js中加载其他资源？
1.逻辑上比较合理
因为JS确实需要这些资源文件配合才能实现整体功能
2.配合webpack这类工具的打包
能确保在上线时，资源不会缺失，而且都是必要的

webpack加载源文件的过程时什么样的？
类似一个工作管道，依次使用多个loader，最终会在这个管道结束以后输出一段标准的js代码字符串。

注意：同一个模块使用多个loader，注意执行顺序，从后往前执行

module.exports={
	entry:'./src/main.css',
	output:{
		filename:'bundle.js'
	},
	module:{//css-loader只是把文件转换为js文件，style-loader才是去应用这些文件
		rules:{
			{  
				test:/\.css$/,
				use:[
					'style-loader',
					'css-loader'
				]
			}
		}
	}
}

聊聊plugin

插件最常见的应用场景：

• 实现自动在打包之前清除dist目录（上次的打包结果）
• 自动生成应用所需要的HTML文件
• 根据不同环境为代码注入类似API地址这种可能变化的部分
• 拷贝不需要参与打包的资源文件到输出目录
• 压缩Webpack打包完成后输出的文件
• 自动发布打包结果到服务器实现自动部署

插件机制的工作原理：
webpack 为每一个工作环节都预留了 合适的钩子
扩展时只需要找到合适的时机去做合适的事情

webpack的核心原理

webpack-dev-server 开发服务器，并且将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在一起。