中移在线 12-24K·13薪 岗位要求 击破 webpack

2、webpack

mode：环境，默认development，当dev时，打包出的js文件还基本可以阅读，pro时进行了转义和压缩。
entry:{
	main:'./src/index.js'
},
output:{
	filename:'[name].js',
	path:path.resolve(__dirname,'dist') 
	// path 为原生模块，require引入即可，
	//__dirname 为动态目录，如：d盘下word文件夹，不同人放的位置不一样，可以动态匹配到；放到服务器上也是一样/home/web/webpackTest
},
plugins:{
	//一样require引入'html-webpack-plugin'
	new HtmlWebpackPlugin({
		template:'./src/index.html'
	})
}

2.1 webpack拆分、合并配置(为了方便打dev和pro)

tips: webpack-merge 导出的是smart，给她赋值为merge



2.2 webpack-dev-server (代码热更新、跨域配置)

tips：也就是请求到以/Yixiantong/xxxxx开头时，请求到http://xxxx.xxxx.com下


当接口要“干掉” api时（即真实接口是没有api的）

2.3 css

tips： style-loader 将样式添加至 style标签内，css-loader 处理css文件间的依赖关系。

2.3.1 css 样式兼容

配置文件

2.3.2针对浏览器设置，根据提供的目标浏览器的环境来，智能添加css前缀


自动添加了兼容前缀

2.3.4 预处理器 sass、less

2.4 图片打包；图片大小限制，小于此限制的会转为base64，减少http请求；大于此限制的，给定打包文件夹，处理加载慢的情况

图片打包

图片大小限制，小于5k，转为base64格式，大于的，打包到dist/img目录下。

2.5 多入口

tips：【name】占位符 对应的为 entry 中的 key值；clean-webpack-plugin require引入

2.6 css文件抽离 当使用上文所说的 style-loader时，其实是插入到了style标签内，生产环境一般希望抽离，并没有生产.css文件

2.7 公共模块打包，开发者封装的、多处引用的 以及 第三方包（node_modules）。
为了更好的展示，所以弄了两个html，所以要配置对应的html和js



开始代码抽离、分割配置

参考视频：https://www.bilibili.com/video/BV1By4y177gX?p=1&vd_source=01167827b40c4953b155149cf02fef6b