webpack入门

一.概念

webpack ：前端静态模块打包器

二.安装方式

npm i webpack webpack-cli -D

三.配置文件

// webpack配置文件
//  入口 ，出口 ，模块
const HtmlWebpackPlugin  = require('html-webpack-plugin')
module.exports = {
	entry: './src/index.js', // 入口
	output: {
		path:__dirname+'/dist', // 目录
		filename: 'main.js', // 打包好的js文件
	},
	mode:'production', // 模式 产品模式，production ,开发模式 development
	module:{

		// 规则
		rules:[
			{"test":/\.css/,use:["style-loader","css-loader"]},
			{
				"test":/\.(png|jpg|jpeg|svg|ico|bmp|gif|webp)/, // 如果是图片格式结尾
				use:[
					{
						loader:"url-loader",options:{   //就采用url-loader
							name:"img/[name].[ext]",  // 打包到dist下面的img文件件（自动生成）
							limit:10240,  // 
						}
					}
				]
			}
		]
	},
	plugins:[
		// 实例化插件（把public的index.html 插入到main.js(打包好的文件)拷贝到dist目录）
		new HtmlWebpackPlugin({"template":'./public/index.html'})
	],
	devServer:{
		host:'localhost',
		port:8080,
		hot:true,
		open:true,
	}
}

• style-loader 把css加载到style标签
• css-loader 处理.css文件

四. 

plugins:插件

• 定义：处理内容外在webpack处理过程中额外操作，加载模板，压缩，服务器。
• html-webpack-plugin 把模板html插件打包好的js拷贝到dist目录
• 使用
• 安装 npm i html-webpack-plugin
• 导入 const HtmlWebpackPlugin = require(“html-webpack”)
• 使用 plugins:[new HtmlWebpackPlugin({“template”:“./public/index.html”})]

本地服务器—devServer

• devServer:{host:“域名”,port:8080,hot:true,open:true,proxy:{}}
• “scripts”:{“serve”:“webpack serve”} （package.json）
• npm run serve 

hash命名

• hash 文件内容发生变化，hash变化
• contentHash 内容发生变化，hash变化
• chunckHash 入口有很多个，哪个入口发生变化，hash就发生变化