# webpack 5 概述
> webpack 是一个现代 javascript 应用程序的 **静态模块打包器 (module bundler)**
>
> vue-cli 脚手架环境, 集成了 webpack, 所以才能对各类文件进行打包处理
[webpack官网](https://webpack.js.org/)
## webpack 能做什么
webpack是一个 静态模块 打包器
1. 语法转换
+ less/sass转换成css
+ ES6转换成ES5
+ typescript转换成js
2. html/css/js 代码压缩合并 (打包)
3. webpack可以在开发期间提供一个开发服务器
+ 自动开启浏览器
+ 自动监视文件变化
+ 自动刷新浏览器
项目一般先打包再上线
## webpack 的模块的说明
在 webpack 中, 一切的静态资源都称之为模块 (html/css/js/图片..)
- css
- js
- 图片
- 字体图标
# webpack 5 的基本使用
注意: 文档有可能不全的, 先按照我们笔记步骤, 先配置, 先上手
以后开发: 对着官网, 对着博客, 去配 (博客的时间, 找近几年的)
## webpack打包的基本步骤
1. 建目录 dist, src/main.js
2. 初始化:
```
yarn init -y
```
3. 安装包 (将webpack记录成了开发依赖, 只在开发中使用):
```
yarn add webpack webpack-cli -D
```
4. 在package.json中, 配置scripts
```
"scripts": {
"build": "webpack ./src/main.js"
},
```
打包 ./src/main.js 到 dist 目录中去
5. npm run build 打包 => yarn build
## npm中 --save和 --save-dev的区别
1. --save 简写-S: 将安装包作为项目的依赖 (**目前为默认值**)
早期的 npm 安装包的时候, 必须加上 --save 才会添加到 package.json 项目依赖中去
2. --save-dev 简写 -D: 将安装包作为开发阶段的依赖
**tips:**
- dependences: 项目依赖, 项目上线也要用的
- devDependencies: 开发依赖, 只在开发中使用, 上线时不要用的
**注意点: yarn add jquery -D; yarn只认识 -D**
## npm中scripts的使用
在package.json文件中, 可以配置 scripts ... 配置自己的命令
```
"scripts": {
"pp": "yarn add jquery"
}
```
**运行方式: npm run xx**
特殊的命令: start / stop 可以省略 run
```
npm run start => npm start
npm run stop => npm stop
```
使用 yarn 直接不需要加 run
```
npm run pp => yarn pp
npm run build => yarn build
```
## webpack配置到配置文件中
生产环境: 上线的环境, 代码需要压缩合并处理的 production
开发环境: 还在开发中, 代码一般不压缩的 (可以查看源码) development
1. 建目录 dist src/main.js
2. 初始化
```
yarn init -y
```
3. 安装依赖包
```
yarn add webpack webpack-cli -D
```
4. 配置scripts
```js
scripts: {
"build": "webpack --config webpack.config.js"
}
```
`--config webpack.config.js` 这个配置文件名为默认值, 不加也会默认找这个文件
5. 提供 webpack.config.js
参考文档: [https://webpack.docschina.org/concepts/#入口-entry-](https://webpack.docschina.org/concepts/#入口-entry-)
```js
const path = require('path')
module.exports = {
// entry: 配置入口文件 (从哪个文件开始打包)
entry: './src/main.js',
// output: 配置输出 (打包到哪去)
output: {
// 打包输出的目录 (必须是绝对路径)
path: path.join(__dirname, 'dist'),
// 打包生成的文件名
filename: 'bundle.js'
},
// 打包模式 production 压缩/development 不压缩
mode: 'development'
}
```
小测试:
假定在main.js中导入一个 aa.js, 多个文件需要打包, wepack会打包成一个文件, 可以节约请求的次数
```js
import './js/aa.js'
console.log('这是main模块')
```
## 基于 webpack 实现隔行变色
- 新建 public/index.html 编写代码
![image-20191126112505518](asset/image-20191126112505518.png)
- 在 index.html 中新建一些 li 玩玩
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- ul>li{我是第$个li}*10 -->
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
</ul>
</div>
<script src="../dist/bundle.js"></script>
</body>
</html>
```
需求:
1. **使用 jquery 隔行变色**
安装jquery
```
yarn add jquery
```
`main.js`
```js
// 需求: 通过jquery实现隔行变色
import $ from 'jquery'
$(function() {
$('#app li:nth-child(odd)').css('color', 'red')
$('#app li:nth-child(even)').css('color', 'green')
})
```
2. **让最后一行的文字变成当前日期**
安装 moment
```
yarn add moment
```
`main.js`
```js
// 需求: 通过jquery实现隔行变色
import $ from 'jquery'
import moment from 'moment'
$(function() {
$('#app li:nth-child(odd)').css('color', 'red')
$('#app li:nth-child(even)').css('color', 'green')
$('#app li:last-child').text(moment().format('YYYY年MM月DD日'))
})
```
## **自动生成html** - html-webpack-plugin插件
目前我们都是在 index.html 中手动引入打包后的资源,这种引入方式是有缺点的,
将来上线需要把 index.html 和 dist 目录合到一起, 且目录引入也有问题, 需要改导入的路径
所以一般会用一个插件, 会自动将 public 中的 index 拷贝到 dist下, 并自动引入打包后的文件
1. 下载
```
yarn add html-webpack-plugin -D
```
2. **在`webpack.config.js`文件中,引入这个模块** :
```js
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
```
3. 配置
```js
plugins: [
new HtmlWebpackPlugin({ template: './public/index.html' })
]
```
> **配置好了之后, public 目录的 index.html 就不需要引入打包后的文件了, 会自动被插件生成 html 引入**
`public/index.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- ul>li{我是第$个li}*10 -->
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
</ul>
</div>
<!-- 打包后的文件会被自动引入, 不需要手动引入了 -->
</body>
</html>
```
# webpack - loaders 的配置
webpack默认只认识 js 文件和 json文件, 但是webpack 可以使用 [loader](https://www.webpackjs.com/concepts/loaders) 来加载预处理文件, 允许webpack也可以打包 js之外的静态资源。
所以webpack如果要处理其他文件类型, **记得要先配置对应的 loader**
## webpack中处理 css 文件
**需求: 去掉小圆点, 新建 css 目录**
1. 安装依赖
```
yarn add style-loader css-loader -D
```
2. 配置
```js
module: {
// loader的规则
rules: [
{
// 正则表达式,用于匹配所有的css文件
test: /\.css$/,
// 先用 css-loader 让webpack能够识别 css 文件的内容
// 再用 style-loader 将样式, 以动态创建style标签的方式添加到页面中去
use: [ "style-loader", "css-loader"]
}
]
},
```
## 分离 css 文件 `mini-css-extract-plugin`
我们上面的操作,使得`css`和`js`文件混杂在一起了,将css放到了style标签中, 和html一起加载了一个文件请求次数是少了
但是如果css文件太大的话,也不是太好,那有没有什么办法把`css`分离出来呢?
插件: `mini-css-extract-plugin`
1. 安装依赖包
```
yarn add mini-css-extract-plugin -D
```
2. **在`webpack.config.js`文件中,引入这个模块**
```js
// 引入分离 css 文件的 模块
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
```
3. 配置loaders
```js
// 模块加载
module: {
// loader的规则
rules: [
// 配置 css 文件的解析
{
test: /\.css$/,
use: [ // 根据官方文档写的,注意'css-loader'的书写位置
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath:'../',
},
},
'css-loader'
]
},
],
}
```
4. 插件的配置
```js
plugins: [
new HtmlWebpackPlugin({ template: './public/index.html' }),
// 定义打包好的文件的存放路径和文件名
new MiniCssExtractPlugin({
filename:'css/index.css'
})
],
```
## webpack 中处理 less 文件
1. 下载依赖包
注意: 解析less文件需要识别 less 语法, 所以除了 `less-loader` 需要额外下载 `less` 包
less-loader: 将less转换成 css
```
yarn add less less-loader -D
```
2. 配置
```js
// 配置 less 文件的解析
{
test: /\.less$/,
use: [
// 分离出 css 内容
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath:'../',
},
},
'css-loader',
'less-loader'
]
}
```
## webpack 中处理图片 - url-loader
我们试了一下,在`css`中用到一下背景图片,结果就报错了,难道`webpack`连图片也认不出来吗?
没有错,的确认不出来, 此时需要转换图片的 loader, 来处理图片的问题, 主要用到 `url-loader` 和 `file-loader`
注意: `url-loader` 中的部分功能要用到 `file-loader`, 要下载两个模块
1. 下载依赖包
```
yarn add url-loader file-loader -D
```
2. 配置loader
```js
{
test: /\.(png|jpg|gif)$/i,
use: [
{ loader: 'url-loader' }
]
}
```
图片默认转成 base64 字符串了,
- 好处就是浏览器不用发请求了,直接可以读取
- 坏处就是如果图片太大,再转`base64`就会让图片的体积增大 30% 左右, 得不偿失
所以需要通过 options 配置选项进行配置 limit, 可以设置一个临界值, 大于这个值会整个文件直接打包到目录中, 得到是路径,
如果小于这个值, 就会转成 base64, 节约请求的次数
```js
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
// 超过 8k 就不转 base64, 小于 8k 才转
limit: 8 * 1024
}
}
]
}
```
## 配置图片的打包输出目录
默认是直接输出到了 dist 根目录, 可以通过 options 进行配置
```js
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// 超过 8k 就不转 base64, 小于 8k 才转字符串
limit: 8 * 1024,
// 配置输出的文件名
name: '[name].[ext]',
// 配置静态资源的引用路径
publicPath: "../images/",
// 配置输出的文件目录
outputPath: "images/"
}
}
]
}
```
## webpack 配置字体图标 - url-loader
字体图标 和 图片的配置一致
``` js
// 处理字体图标的解析
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8 * 1024,
// 配置输出的文件名
name: '[name].[ext]',
// 配置静态资源的引用路径
publicPath: "../fonts/",
// 配置输出的文件目录
outputPath: "fonts/"
}
}
]
}
```
## 插件:清除dist目录(了解)
使用 [clean-webpack-plugin插件](https://www.webpackjs.com/guides/output-management/#%E6%B8%85%E7%90%86-dist-%E6%96%87%E4%BB%B6%E5%A4%B9) 在每次打包前清除下dist文件夹。
安装依赖包
```
yarn add clean-webpack-plugin -D
```
`webpack.config.js`
```js
// 其他代码
// 导入清除插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
// 其他配置
plugins: [
// ....
// 调用清除打包目录插件
new CleanWebpackPlugin()
]
};
```
## webpack 使用 babel 处理高版本的 js 语法
babel 的介绍 => 用于处理高版本 js语法 的兼容性
1. 安装包
```
yarn add -D babel-loader @babel/core @babel/preset-env
```
2. 配置规则
```js
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
```
# webpack开发服务器
## webpack-dev-server自动刷新(在内存中实时打包) (webpack5 ???)
目前: 我们已经使用的是 5 的版本, 但是 **webpack-dev-server** 还没更新, 所以需要暂时回退, 我们学习的语法是完全向前兼容的
版本兼容问题: https://blog.csdn.net/weixin_43760969/article/details/109111960
1. 下载
```
yarn add webpack-dev-server -D
```
2. 配置scripts
```js
scripts: {
"build": "webpack --config webpack.config.js"
"dev": "webpack-dev-server --config webpack.config.js"
}
```
由于版本不兼容, 会报错误 (这个错误是暂时的, webpack更新了, 但是相关插件还没有更新完) 所以我们实际开发, 这时候应该降版本到稳定版
![image-20201029053841266](asset/image-20201029053841266.png)
降版本
```
yarn add webpack@4.43.0 webpack-cli@3.3.12 webpack-dev-server@3.11.0 -D
```
重新 yarn dev 启动成功
![image-20201029054155786](asset/image-20201029054155786.png)
## webpack-dev-server 的配置
```js
devServer: {
port: 3000, // 端口号
open: true // 自动打开浏览器
}
```
# webpack处理vue
## vue-loader的配置
安装vue
```js
yarn add vue
```
+ 提供`App.vue`组件
```js
<template>
<div id="app">我是app</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
```
+ 编写入口文件`main.js`
```js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
// render函数用于渲染一个组件作为根组件(固定写法)
render (createElement) {
// 把App组件作为根组件
return createElement(App)
}
})
```
Vue Loader 是一个 [webpack](https://webpack.js.org/) 的 loader,它允许你以一种名为[单文件组件 (SFCs)](https://vue-loader.vuejs.org/zh/spec.html)的格式撰写 Vue 组件:
+ 安装依赖包
```js
yarn add -D vue-loader vue-template-compiler
```
+ webpack配置
```js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件!
new VueLoaderPlugin()
]
}
```
原文地址:https://www.cnblogs.com/caoyusong9527/p/13983689.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。