webpack

定义：前端静态模块化打包机

安装

npm i webpack webpack-cli -D

配置文件

webpack.config.js

webpack 核心概念

entry // 入口

output  // 输出
{
path:__dirname+"/dist",
filename:"main.js"
}
// __dirname 当前目录
// filename 文件名称

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

loader // 加载器
// 模块
module:{
	// 规则
	rules:[
		{test:/\.css/,loader:["style-loader","css-loader"]}
	]	
}

plugins 插件

定义：处理内容外在webpack处理过程中额外操作，加载模板，压缩，服务器。

html-webpack-plugin   // 1.把html模板文件加载到dist目录 ,并插入打包好的js
npm i html-webpack-plugin  // 2.安装
// 3.配置
const htmlWebpackPlugin = require("html-webpack-plugin")
plugins:[
    new htmlWebpackPlugin({template:"./public/index.html"})
]

devServer 本地服务器

// webpack.config.js 文件下
devServer:{
		open:true,//自动打开浏览器
		hot:true,//热更新
		host:"localhost",//本地域名
		port:8080,//端口号
		proxy:{}//同vue.config.js 里面的代理配置
	}

// package.json 文件下
"script":{
	"serve":"webpack server"
}

// 运行
npm run serve