一、Webpack原理相关概念
- 树结构：在一个入口文件引入所有资源并形成依赖关系树状图
- 模块：可以是ES6模块、CommonJs或者AMD模块（对于webpack来说一切资源皆模块，不如css，img等等）
- chunk：打包过程中被操作的模块文件叫chunk，比如异步加载一个模块就是一个chunk
- bundle：最后打包后的文件叫做bundle，大多数是多个chunk的合集
二、安装与体验
-
初始化package.json文件
npm init -y -
安装webpack和webpack-cli
npm install webpack webpack-cli -D // 开发时依赖 -D => --save-dev -
指定打包模式
webpack --mode development // 指定模式 development为开发模式 production为生产模式
三、Webpack核心概念
-
entry 入口
- 单入口 String格式 指定一个入口文件，打包成一个chunk，chunk名称默认，输出一个bundle
entry: './src/js/index.js' // => 输出 main.js
-
多入口 Array格式 指定多个入口文件，所有的入口文件打包成一个chunk，chunk名称默认，输出一个bundle
entry: ['./src/js/index.js', './src/js/cart.js'] // => 输出 main.js
-
多入口 Object格式 指定多个入口文件，有几个入口文件则打包成几个chunk，chunk名称是key，并输出多个bundle
entry: { index: './src/js/index.js', cart: './src/js/cart.js' } // => 输出index.js 和 cart.js
-
多入口 特殊用法 指定多个入口文件，有几个入口文件则打包成几个chunk，chunk名称是key，并输出多个bundle
entry: { vendor: ['./src/js/jquery.js','./src/js/common.js'], index: './src/js/index.js', cart: './src/js/cart.js' } // => 输出vendor.js、index.js 和 cart.js
output 出口
-
mode 模式
development 开发模式
production 生产模式（线上）
// webpack.config.js module.exports = { mode: 'production' // 指定模式 }
-
loader
-
打包CSS资源（css-loader和style-loader）
css-loader作用：处理css中@import和url引入的外部资源
style-loader作用：把样式插入到dom中。其原理是在head标签中插入一个style标签，并把样式写入到这个style标签的innerHTML里。
// 1.下载 npm install css-loader style-loader -D // 开发时依赖 // 2.使用 module:{ rules:[ { test: /\.css$/, use: ['style-loader', 'css-loader'] // 顺序是从右到左 } ] } -
-
打包Less和Sass资源
// 1.下载 npm install less less-loader -D // less-loader npm install node-sass sass-loader -D // sass-loader // 2.使用 module: { rules: [ { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, { test: /\.scss$/, use: ['style-loader', 'css-loader', 'scss-loader'] } ] }
-
打包CSS中图片资源 （url-loader和file-loader）
// 1.下载 npm install url-loader file-loader -D // 2.使用 // 单个loader配置 module:{ rules:[ { test: /\.(png|jpg|gif|jpeg)$/, loader: 'url-loader', options: { publicPath: './src/assets/images/', // 指定图片访问路径 => output: 'images/' // 指定图片输出路径 => 生成dist/images/xxx.png name: '[name]_[hash:10].[ext]', // 指定输出的图片的名称 limit: 1024 * 8 // 限制文件大小 8kb以下由 url-loader 处理打包成base64 } } ] } // 多个loader配置 module:{ rules:[ { test: /\.(png|jpg|gif|jpeg)$/, use: [ { loader:'url-loader', options:{} }, { loader:'file-loader', options:{} }, ] } ] }
-
打包HTML中图片资源 （html-loader）
作用：打包后的html文件自动引用图片资源
// 1.下载 npm install html-loader -D // 2.使用 module: { rules: [ { test: /\.html$/, loader: 'html-loader', } ] } -
打包其他资源字体图标 （file-loader）
直接输入其他资源，不通过处理
// 1.下载 npm install file-loader -D // 2.使用 module: { rules: [ { exclude: /\.(html|css|js|json|gif|png|jpeg|less|scss)$/, loader: 'file-loader', options: { publicPath: './font', outputPath: 'font/', name: '[name]_[hash:8].[ext]' } } ] }
-
处理CSS浏览器兼容性问题
// 1.下载 npm install postcss-loader postcss-preset-env -D // 2.使用 // 1) 在webpack.config.js的 loader 中配置 module: { rules: [ { test: /\.css$/, use: ['MiniCssExtractPlugin.loader', 'css-loader', 'postcss-loader'] } ] } // 2）新建postcss.config.js文件 module.exports = { plugins: [ require('postcss-preset-env')() ] } // 3）在 package.json 中写入 { "browserslist": ["> 0.2%", "last 2 versions", "not dead"] } -
对js语法配置eslint进行检查
// 1.下载 npm install eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D // 2.使用 // 1)在webpack.config.js中配置 module: { rules: [ { test: /\.js$/, exclude: /node_modules/, // 对第三方库文件不进行eslint检查 loader: 'eslint-loader', options: { fix: true } } ] } // 2)在package.json中配置 "eslintConfig": { "extends": "airbnb-base" // 依赖aribnb-base包 } // 3在js文件添加 // eslint-disable-next-line 可对下一行eslint检查规则失效 // eslint-disable-next-line console.log('该行eslint检查规则失效');
-
plugins 插件**
- 打包HTML资源 (html-webpack-plugin)
作用：复制指定HTML模板，并自动引入打包输出的js/css资源
// 1.下载 npm install html-webpack-plugin -D // 2.引入 const HtmlWebpackPlugin = require('html-webpack-plugin'); // 3.使用 new HtmlWebpackPlugin({ template: './public/index.html', // 指定模板文件 filename: 'index.html', // 指定html文件名称 chunks:['index','vendor'], // 指定引入的文件 // 压缩 minify: { collapseWhitespace: true, // 删除空格 removeComments: true // 移除注释 } }) - 打包HTML资源 (html-webpack-plugin)
-
提取CSS为单独文件 mini-css-extract-plugin
作用：提取单独CSS文件，并使用link标签引用该CSS文件
// 1.下载 npm install mini-css-extract-plugin -D // 2.引入 const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 3.使用 plugins: [ new MiniCssExtractPlugin({ filename: 'style.css' // 指定css文件名 }) ] module: { rules: [ { test: /\.css$/, use: ['MiniCssExtractPlugin.loader','css-loader'] } ] }
-
压缩CSS文件内容 optimize-css-assets-webpack-plugin
作用： 去掉css文件的空格以达到压缩效果
// 1.下载 npm install optimize-css-assets-webpack-plugin -D // 2.使用 new OptimizeCssAssetsWebpackPlugin()
-
开发服务器devServer配置
devServer是开发过程中的服务器，使用了express的Http服务器，该http服务器和client使用了websocket通讯协议，其作用是监听资源文件的改变，一旦发生改变，它就会实时进行编译。
// 1.下载 npm install webpack-dev-server -D // 2.使用 // 1)在webpack.config.js中配置 devServer: { // 告诉服务器内容的来源。仅在需要提供静态文件时才进行配置 contentBase: path.resolve(__dirname, 'public'), open: true, // 自动打开浏览器 compress: true, // 开启gzip压缩 host: '0.0.0.0', // 设置ip地址 port: 3000, // 设置端口号 // 开启模块热更新 Hot Module Replacement（默认只更新js文件） // css文件需要开启热更新则需要配置style-loader, // html文件则需要在entry引入html文件 entry: ['./public/index.html', './src/main.js'] hot: true, // 设置跨域 proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true,// 如果接口跨域，需要进行这个参数配置 //pathRewrite方法重写url //pathRewrite: {'^/api': '/'} 重写之后url为 http://localhost:3000/xxx //pathRewrite: {'^/api': '/api'} 重写之后 http://localhost:3000/api/xxx }, }, // devServer 内部的 所有中间件执行之前的自定义执行函数 before: (app, server, compiler) => { app.get('/users', (req,res) => { res.json({ data: [ {name: 'user1'}, {name: 'user2'}, // ... ] }) }) } // 指定捆绑的bundle文件的特定访问路径 默认 '/' （建议 devServer.publicPath 与 output.publicPath 相同） publicPath: '/assets/', // 假设output的filename为bundle.js 配置后则会访问http://localhost:8080/assets/bundle.js } // 在webpack.config.js中添加 target: "web" 解决webpack5无法自动刷新问题 // 2)在package.json配置运行脚本 "scripts": { "serve": "webpack serve --mode development --port 3000", "build": "webpack --mode production" }, -
开发环境的优化
- 开启模块热更新，只更新修改的文件
-
生产环境的优化
通过tree-shaking去除实际没有使用到的js代码来减少体积（条件：1. 必须使用es6模块化 2. 开启production环境）
使用purgecss-webpack-plugin去除实际没有使用到的css代码来减少体积 参考purgecss-webpack-plugin用法
// 1.下载 npm install purgecss-webpack-plugin -D // 2.使用 // webpack.config.js const { join } = require('path'); const PurgecssPlugin = require('purgecss-webpack-plugin'); const glob = require('glob'); const PATHS = { src: join(__dirname, 'public') } // 需要指定html所在的目录(坑) plugins: [ new PurgecssPlugin({ paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }) }) ]
