webpack

一、webpack

        1、概念

           1.前端模块化打包机：打包+依赖关系

           2.把错综复杂依赖关系和文件(jsx,.vue.sass)生成浏览器能识别的：html+css+js+图片

        2、安装初始化

           md mydiv
           cd mydiv
           npm init -y
           npm i webpack webpack-cli -D

        3、核心

           webpack依赖webpack.config.js打包

           入口：entry

           输出：output

           模式：mode  //development 开发模式  production 产品模式

           加载器：loader     处理非js文件
           css     css-loader 处理css文件
           style-loader 把css文件加载到sytle标签
           图片/文件     file-loader 处理文件
           url-loader 处理文件并把小图片转为base64格式

           插件：plugins       压缩，打包，清理等功能
           html-webpack-plugin  html模板
           webpack-dev-server  本地服务器

           解决：resolve       别名：alias
           {“@”:path.resolve(__dirname,'./src')}

module.exports = {
		entry: './src/index.js', //入口
		output: { //出口
			filename: "main.js", //文件名
			path: __dirname + "/dist" //文件夹
		},
		mode: 'development', //产品模式 production 开发模式 
		module: {
			rules: [
				// loader css-loader让webpack拥有处理css的能力 
				// 遇到.css结尾的文件都使用这两个loader处理
				{
					test: /\.css/,
					use: ["style-loader", "css-loader"]
				},
				{
					test: /\.(png|jpeg|jpg|gif|svg|webp|ico)/,

					use: [{
						loader: "url-loader",
						options: {
							limit: 50000, //当文件小于 5000 字节 转换为 base64格式（减少http请求次数）
							name: 'images/[name].[ext]' // [name]名称 [ext]后缀名
						},
					}]
				}
			]},
			plugins: [
				// 把template文件拷贝到dist目录并插入打包还要的js（main.js）
				new HtmlWebpackPlugin({
					template: './public/index.html'
				})
			],
			devServer: {
				proxy: {}, //代理
				host: "localhost", //域名
				port: 8080, //端口号
				hot: true, //热更新
				open: true, //自动打开浏览器
			}
		}