1.基本概念
webpack是一个js应用程序静态模拟打包器
可以处理静态文件,把很多文件打包整合到一起, 缩小项目体积, 提高加载速度
2.使用步骤
-
初始化包环境
yarn init
-
安装依赖包
yarn add webpack webpack-cli -D
-
配置scripts(自定义命令)
scripts: { "build": "webpack" }
-
新建目录src
-
新建src/add/add.js - 定义求和函数导出
export const addFn = (a, b) => a + b
-
新建src/index.js导入使用
import {addFn} from './add/add' console.log(addFn(10, 20));
-
运行打包命令
yarn build #或者 npm run build
总结: src并列处, 生成默认dist目录和打包后默认main.js文件
注:导入新的方法后直接执行yarn build重新打包
3.配置webpack
3.1配置入口和出口
src并列处新建webpack.config.js文件,填入配置项
const path = require("path")
module.exports = {
entry: "./src/main.js", // 入口
output: {
path: path.join(__dirname, "dist"), // 出口路径
filename: "bundle.js" // 出口文件名
}
}
接着修改package.json,自定义打包命令
"scripts": {
"build": "webpack"
},
3.2.自动生成html的插件
-
下载插件
yarn add html-webpack-plugin -D
-
webpack.config.js配置
// 引入自动生成 html 的插件 const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { // ...省略其他代码 plugins: [ new HtmlWebpackPlugin({ template: './public/index.html' // 以此为基准生成打包后html文件 }) ] }
-
重新打包后观察dist下是否多出html并运行看效果
3.4_加载器 - 处理css文件问题
-
安装依赖
yarn add style-loader css-loader -D
-
webpack.config.js 配置
const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { // ...其他代码 module: { rules: [ // loader的规则 { test: /\.css$/, // 匹配所有的css文件 // use数组里从右向左运行 // 先用 css-loader 让webpack能够识别 css 文件的内容并打包 // 再用 style-loader 将样式, 把css插入到dom中 use: [ "style-loader", "css-loader"] } ] } }
-
新建src/css/li.css - 去掉li默认样式
ul, li{ list-style: none; }
-
引入到main.js (因为这里是入口需要产生关系, 才会被webpack找到打包起来)
import "./css/index.css"
-
运行打包后dist/index.html观察效果和css引入情况
注:处理less方法类似
3.5.加载器 - 处理图片文件
1.如果使用的是webpack5版本的, 直接配置在webpack.config.js - 的 rules里即可
{ test: /\.(png|jpg|gif|jpeg)$/i, type: 'asset' }
如果你用的是webpack4及以前的, 请使用者里的配置
-
图片转成 base64 字符串
-
好处就是浏览器不用发请求了,直接可以读取
-
坏处就是如果图片太大,再转
base64
就会让图片的体积增大 30% 左右
-
-
src/assets/准备老师发的2个图文件
-
在css/less/index.less - 把小图片用做背景图
body{ background: url(../assets/logo_small.png) no-repeat center; }
-
在src/main.js - 把大图插入到创建的img标签上, 添加body上显示
// 引入图片-使用 import imgUrl from './assets/1.gif' const theImg = document.createElement("img") theImg.src = imgUrl document.body.appendChild(theImg)
-
打包运行dist/index.html观察2个图片区别
4. webpack 开发服务器
4.1 为什么需要?
每次修改代码, 都需要重新 yarn build 打包, 才能看到最新的效果, 实际工作中, 打包 yarn build 非常费时 (30s - 60s) 之间
解决问题: 起一个开发服务器, 在电脑内存中打包, 缓存一些已经打包过的内容, 只重新打包修改的文件, 最终运行加载在内存中给浏览器使用
4.2 webpack-dev-server自动刷新
目标: 启动本地服务, 可实时更新修改的代码, 打包变化代码到内存中, 然后直接提供端口和网页访问
-
下载包
yarn add webpack-dev-server -D
-
配置自定义命令
scripts: { "build": "webpack", "serve": "webpack serve" }
-
运行命令-启动webpack开发服务器
yarn serve #或者 npm run serve
4.2_webpack-dev-server配置
-
在webpack.config.js中添加服务器配置
更多配置参考这里: DevServer | webpack 中文文档
module.exports = { // ...其他配置 devServer: { port: 3000 // 端口号 } }