一:定义
1.前端项目模块打包器
2.生成依赖关系
html
css
js
图片(资源)
3.自动化
压缩
…
二:核心概念
1.入口entry
2.出口output
0.1
filename
文件名称
0.2
path
文件路径
3.loader加载器
0.1 test 处理哪些文件
0.2 use 使用哪些loader加载器
0.3 让webpack 拥有处理 打包非js文件的能力
4.plugin插件
使用步骤:1.安装 2. require导入 3. new 实例化
让webpack在打包运行过程中,额外处理内容的能力:1.压缩 2.优化 3.html模板生成
5.mode模式
prduction
产品模式
develoment
开发模式
三:基础配置文件webpack.config.js
const path = require("path")
module.exports = {
enter:"xxx/src/index.js",
output:{
filename:"xxx.js",
path:path.resolve(__dirname,'path')
}
}
四:命令运行
1. npx webpack
2. npm run start
script:{"start":"webpack"}
package.json
五:loader
1.CSS
css-loader
加载css
style-loader
style标签加载css
miniCssExtractPlugin.loader
把css抽出为单独的css文件
2.less
(less)编译less文件
less-loader 加载less文件
六:plugin
1. html-webpack-plugin
处理html模板
1.title标题
<%= htmlWebpackPlugin.options.title %>
2.minify:true,压缩
3.template地址
2. mini-css-extract-plugin
css提取插件
new miniCssExtractPlugin({
filename:'style.css'
})
3.const optimizeCss=
require(‘optimize-css-assets-webpack-plugin’)
优化css
optimization: {
minimizer: [ new optimizeCss()],
// 压缩器
},
4.webpack-dev-server
本地服务器
1.配置
devServer
0.1host域名
0.2port端口
0.3hot热更新
0.4open打开浏览器
0.5proxy代理
2.运行
“serve”:“webpack-dev-server”,