我的webpack笔记

一：定义

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”,

第一天的笔记总结