概念:前端的静态模块化打包器;把所有文件经过 webpack 处理,生成 html、css图片、js
打包工具
sea.js
require.js
gulp
grunt
webpack 依赖 webpack.config.js 打包
入口—entry
输出—output
path:__dirname+‘/dist’ (__dirname 当前目录)
filename 文件名称
模式—mode
development 开发模式
production 产品模式
加载器—loader
处理非js文件
module:{
rules:[
{“test”: / \ .css/,loader:[“style-loader”,“css-loader”]}
]
}
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就发生变化