Webpack学习笔记

webpack：

webpack 是node的第三方模块包，用于打包代码

webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）

把很多文件打包整合到一起，缩小项目体积，提高加载速度

功能：

less/sass ------> css

ES6/7/8 -------->ES5

html/css/js------>压缩合并

基础使用：

默认的入口文件 ./src/index.js 默认出口文件 ./dist/main.js

初始化环境

yarn init
安装依赖包

yarn add webpack webpack-cli -D
package.json配置scripts(自定义命令)

"scripts": {
"build": "webpack"
},
项目目录下新建src/add/index.js

export const addFn = (a, b) => a + b
项目目录下新建 src/index.js

import { addFn } from './add'
console.log(addFn(4, 5))
项目目录下打开命令窗口，运行打包命令

yarn build
or
npm run build

**总结：**打包命令执行后，在项目目录下生成默认的dist目录和打包后默认的main.js文件

代码变更，重新打包

新建src/tool/index.js

export const getArrSum = (arr) =>
  arr.reducw((sum, val) => {
    sum += val
  }, 0)

更改src/index.js代码

import { addFn } from './add'
import { getArrSum } from './tool'
console.log(addFn(4, 5))
console.log(getArrSum([1, 2, 3, 4]))
console.log(addFn(5, 6))

运行打包命令
```
yarn build
```
**总结：**打包后，代码压缩，变量压缩

webpack配置：

如何指定webpack的入口和出口：

项目目录下，新建webpack.config.js
填写配置项

const path = require('path')

module.exports = {
entry: './src/main.js', // 入口路径
output: {
path: path.resolve(__dirname, 'dist'), // 出口路径为绝对路径+dist文件夹
filename: 'build.js', // 创建的出口文件名称
},
}

打包隔行变色项目：

前面的步骤
下载jquery，项目目录下新建public/index.html
src/main.js

import { addFn } from './add'
import { getArrSum } from './tool'
import $ from 'jquery'
console.log(addFn(4, 5))
console.log(getArrSum([1, 2, 3, 4]))
console.log(addFn(5, 6))
$(function () {
$('#app li:nth-child(odd)').css('color', 'red')
$('#app li:nth-child(even)').css('color', 'blue')
})
执行打包命令
把public以及他的html文件复制到dist目录下
在index.html文件中手动引入打包后的build.js

自动生成html文件：

webpack只能打包js文件，插件HtmlWebpackPlugin 简化了 HTML 文件的创建

该插件将为你生成一个 HTML5 文件，在 body 中使用 script 标签引入你所有 webpack 生成的 bundle

安装：

npm install --save-dev html-webpack-plugin
webpack.config.js中配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'build.js',
},
plugins: [new HtmlWebpackPlugin()],
}

打包后，dist目录下就多了html文件，还自动把打包的build.js文件通过script引入

处理css文件--加载器:

webpack 默认只认识js文件和json文件

src/css/index.css给body添加背景颜色
把css文件引入到入口文件被webpack打包
loader加载器，让webpack处理其他类型的文件，打包到js中
安装

npm install --save-dev style-loader css-loader
webpack配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'build.js',
},
plugins: [new HtmlWebpackPlugin()],
module: {
rules: [
//loader的规则
{
test: /.css$/i, //匹配所有的css文件
// use数组中从右往左运行
// 先用css-loader让webpack识别css文件的内容打包
// style-loader 把css插入到dom中
use: ['style-loader', 'css-loader'],
},
],
},
}

处理less文件：

安装

npm install less less-loader --save-dev
webpack配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'build.js',
},
plugins: [new HtmlWebpackPlugin({
// 以此为标准生成打包后的html文件
template: './public/index.html',
})],
module: {
rules: [
//loader的规则
{
test: /.css $/i, //匹配所有的css文件 // use数组中从右往左运行 // 先用css-loader让webpack识别css文件的内容打包 // style-loader 把css插入到dom中 use: ['style-loader', 'css-loader'], }, { test: /\.less$ /i, //匹配所有的less文件
use: [
// 从右往左运行
// compiles Less to CSS
// less-loader让webpack处理less文件，会用less翻译less代码转换成css代码
'style-loader',
'css-loader',
'less-loader',
],
},
],
},
}
src目录下新建less/index.less
入口main.js中引入less文件
打包

指定生成导入的html文件路径：

webpack配置文件中添加

JavaScript 复制代码

plugins: [
    new HtmlWebpackPlugin({
        // 以此为标准 生成打包后的html文件
        template: './public/index.html',
    }),
],

javascript 复制代码

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'build.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 以此为标准 生成打包后的html文件
            template: './public/index.html',
        }),
    ],
    module: {
        rules: [
            //loader的规则
            {
                test: /\.css$/i, //匹配所有的css文件
                // use数组中从右往左运行
                // 先用css-loader让webpack识别css文件的内容打包
                // style-loader 把css插入到dom中
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.less$/i, //匹配所有的less文件
                use: [
                    // 从右往左运行
                    // compiles Less to CSS
                    // less-loader让webpack处理less文件，会用less翻译less代码转换成css代码
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
        ],
    },
}

从yarn build开始，都走了哪些流程：

执行webpack命令，找到配置文件，入口和依赖关系，打包代码输出到指定位置

webpack处理图片文件：

webpack无法自己处理图片文件

webpack5使用asset module技术来实现字体文件和图片文件的处理，无需配置额外的loader

https://webpack.docschina.org/guides/asset-modules/

1：webpack5.在rules里，针对图片文件设置type:asset

2:小于8kb转base64字符串进js里，大于8kb输出文件

在src/assets准备图片文件
在less/aa.less文件中对body设置背景图片
在入口导入图片文件，设置到img标签插入到body
打包

module:{
rules:[
{
// 图片文件的配置 (仅适用于webpack5版本)
test: /.(gif|png|jpg|jpeg)/,
type: 'asset', //匹配上面的文件后，webpack会把他们当静态资源处理打包
// 如果你设置的asset模式以8kb来区分图片文件
// 小于8kb的把图片文件转base64，打包到js中
// 大于8kb的，直接把图片文件输出到dist下
},
]
}

为什么8kb上下的图片要区分：

图片翻译成base64打包到js文件中

好处：浏览器不用法请求了，直接可以读取，速度快

坏处：图片太大，再转base64就会让图片的体积增大30%左右，得不偿失

webpack处理字体图标：

src/assets中放入fonts字体相关的文件夹
src/main.js引入assets/font/iconfont.css
src/main.js创建一个i标签，把字体图标标签添加到body上
添加针对字体文件的加载器规则，使用asset/resource （直接输出文件并配置路径）
打包

module:{
rules:[
{
test: /.(ttf|eot|svg|woff|woff2)/,
type: 'asset/resource',
generator: {
// 生成文件的文字定义规则
filename: 'fonts/[name].[hash:6][ext]', //[ext] 会替换成.eot/.woff
},
},
]
}

webpack对js语法降级

babel https://www.babeljs.cn/

babel-loader https://v4.webpack.js.org/loaders/babel-loader/

babel一个JavaScript编译器，把高版本js语法降级处理输出兼容的低版本语法

babel-loader 让webpack编译打包js代码

步骤：
- src/main.js 定义箭头函数，打印箭头函数变量（不要调用，为了让webpack打包函数，看降级效果）
- 下载加载器

npm install -D babel-loader @babel/core @babel/preset-env webpack

- webpack配置

- 打包

JavaScript 复制代码

{
    test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, //不去匹配这些文件夹下的文件
            use: {
                loader: 'babel-loader', //使用这个loader处理js文件
                    options: {
                        //加载器选项
                        presets: ['@babel/preset-env'], // @babel/preset-env 降级规则  按照这里的规则降级我们的js语法
                    },
                    },
            },

webpack开发服务器：

#### webpack开发服务器

问题：每次修改完代码，重新yarn build打包，才能看到最新效果，实际工作中，打包yarn build非常耗时

为什么：

- 从0构建依赖
- 磁盘读取对应的文件到内存，webpack开始加载
- 再用对应的loader进行处理
- 将处理完的内容，输出到磁盘指定目录

解决：

**起一个开发服务器，缓存一些已经打包过的内容，只重新打包修改的文件，最终运行在内存中给浏览器使用**

打包在内存中，速度快

自动更新打包变化的代码，实时返回给浏览器显示

###### 使用

webpack-dev-server

https://webpack.docschina.org/api/webpack-dev-server/#root

- 下载

npm install --save-dev webpack-dev-server

- 自定义webpack开发服务器启动命令serve 在package.json里

"scripts": {
      "build": "webpack",
      "serve": "webpack serve"
    },

设置开发环境：

mode: 'development', //设置开发环境还是生产环境

启动服务器：

yarn serve


  **webpack-dev-server 会给我们一个地址+端口号 ，浏览器中访问就可以看到打包的index.html页面**

###### 修改端口号

webpack.config.js中修改端口号，重新启动项目

module.exports = {
 mode: 'development',
  devServer: {
    port: 3000,
  },
 }

webpack-dev-server

- 自定义webpack开发服务器启动命令serve 在package.json里

"scripts": {
      "build": "webpack",
      "serve": "webpack serve"
    },

设置开发环境：

mode: 'development', //设置开发环境还是生产环境

启动服务器：

yarn serve


  **webpack-dev-server 会给我们一个地址+端口号 ，浏览器中访问就可以看到打包的index.html页面**

###### 修改端口号

webpack.config.js中修改端口号，重新启动项目

module.exports = {
 mode: 'development',
  devServer: {
    port: 3000,
  },
 }

Webpack学习笔记

webpack：

功能：

基础使用：

webpack配置：

如何指定webpack的入口和出口：

打包隔行变色项目：

自动生成html文件：

处理css文件--加载器:

处理less文件：

指定生成导入的html文件路径：

从yarn build开始，都走了哪些流程：

webpack处理图片文件：

为什么8kb上下的图片要区分：

webpack处理字体图标：

webpack对js语法降级

webpack开发服务器：

设置开发环境：

启动服务器：

设置开发环境：

启动服务器：