webpack过程了解

Icarrot
89 阅读4分钟

webpack

webpack官网

  • 现代 javascript 应用程序的 静态模块打包器 (module bundler)
  • 为 vue-cli 开发环境做铺垫

作用:

  • less/sass -> css

  • ES6/7/8 -> ES5

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

使用步骤

  • 把src下的2个js文件, 打包到1个js中, 并输出到默认dist目录下

  • 默认入口: ./src/index.js

  • 默认出口: ./dist/main.js

**注意:**路径上, 文件夹, 文件名不能叫webpack/其他已知的模块名

  1. 初始化包环境

    npm init

  2. 安装依赖包

    npm install webpack webpack-cli -D

  3. 配置scripts(自定义命令)

    scripts: {
	"build": "webpack"
}

  4. 新建目录src

  5. 新建src/add/add.js - 定义求和函数导出

    export const addFn = (a, b) => a + b

  6. 新建src/index.js导入使用

    import {addFn} from './add/add'
console.log(addFn(10, 20));

  7. 运行打包命令

    npm run build

webpack的配置

webpack-入口和出口

webpack配置 - webpack.config.js(默认)

  1. 新建src文件夹并列处, webpack.config.js文件
  2. 填入配置项（根据需要修改出入口和路径）
const path = require("path")

module.exports = {
    entry: "./src/main.js", // 入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口路径
        filename: "bundle.js" // 出口文件名
    }
}

提交git时忽略第三方模块包

  • 提交项目代码时，实际是不需要上传第三方模块包的
  • 在根目录下创建文件.gitignore，文件类型空
  • 内容直接复制依赖包的根目录名字node_modules
# 当前项目没有交给git管理的情况下，第三方模块文件夹不会变为灰色
node_modules

导入

导入第三方

  • 前提：已经下载了第三方才可以导入成功
import dayjs from 'dayjs'

导入其他文件内容

普通方法

  1. 先导出内容
export const addFn = (a, b) => a + b;
export const obj = { name: "荀彧", age: 500 };
  1. 后导入内容（规定使用解构方式）
import { addFn, obj } from "./add/add";

导出默认导入方法

  1. 导出的同时，默认在其他页面导入这个内容

    export default 名称

加载器

加载器 - 处理css文件

loaders加载器, 可让webpack处理其他类型的文件, 打包到js中

原因: webpack默认只认识 js 文件和 json文件

style-loader文档

css-loader文档

  1. 安装依赖命令

    npm install style-loader css-loader -D

  2. 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"]
          }
        ]
    }
}

  3. 新建src/css/li.css - 去掉li默认样式

    ul, li{
    list-style: none;
}

  4. 引入到main.js (因为这里是入口需要产生关系, 才会被webpack找到打包起来)

    import "./css/index.css"

  5. 运行打包后dist/index.html观察效果和css引入情况

总结: 万物皆模块, 引到入口, 才会被webpack打包, css打包进js中, 然后被嵌入在style标签插入dom上

加载器 - 处理less文件

less-loader让webpack处理less文件, less模块翻译less代码

less-loader文档

  1. 下载依赖包

    npm install less less-loader -D

  2. webpack.config.js 配置

    module: {
  rules: [ // loader的规则
    // ...省略其他
    {
    	test: /\.less$/,
    	// 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
        use: [ "style-loader", "css-loader", 'less-loader']
    }
  ]
}

  3. src/less/index.less - 设置li字体大小24px

    @size:24px;

ul, li{
    font-size: @size
}

  4. 引入到main.js中

    import "./less/index.less"

  5. 打包运行dist/index.html 观察效果

总结: 只要找到对应的loader加载器, 就能让webpack处理不同类型文件

加载器 - 处理图片文件

目标: 用asset module方式(webpack5版本新增)

asset module文档

如果使用的是webpack5版本的, 直接配置在webpack.config.js - 的 rules里即可

{
    test: /\.(png|jpg|gif|jpeg)$/i,
    type: 'asset'
}

如果用的是webpack4及以前的, 请使用者里的配置

url-loader文档

file-loader文档

  1. 下载依赖包

    npm install url-loader file-loader -D

  2. webpack.config.js 配置

    {
  test: /\.(png|jpg|gif|jpeg)$/i,
  use: [
    {
      loader: 'url-loader', // 匹配文件, 尝试转base64字符串打包到js中
      // 配置limit, 超过8k, 不转, file-loader复制, 随机名, 输出文件
      options: {
        limit: 8 * 1024,
      },
    },
  ],
}

    图片转成 base64 字符串

    • 好处就是浏览器不用发请求了，直接可以读取
    • 坏处就是如果图片太大，再转base64就会让图片的体积增大 30% 左右

  3. src/assets/准备老师发的2个图文件

  4. 在css/less/index.less - 把小图片用做背景图

    body{
    background: url(../assets/logo_small.png) no-repeat center;
}

  5. 在src/main.js - 把大图插入到创建的img标签上, 添加body上显示

    // 引入图片-使用
import imgUrl from './assets/1.gif'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)

  6. 打包运行dist/index.html观察2个图片区别

总结: url-loader 把文件转base64 打包进js中, 会有30%的增大, file-loader 把文件直接复制输出

webpack加载文件优缺点

图片转成 base64 字符串

  • 好处就是浏览器不用发请求了，直接可以读取
  • 坏处就是如果图片太大，再转base64就会让图片的体积增大 30% 左右

webpack开发服务器

文档地址: webpack.docschina.org/configurati…

问题: 每次修改代码, 都需要重新 npm run build 打包, 才能看到最新的效果, 实际工作中, 打包非常费时 (30s - 60s) 之间

为什么费时?

  1. 构建依赖
  2. 磁盘读取对应的文件到内存, 才能加载
  3. 用对应的 loader 进行处理
  4. 将处理完的内容, 输出到磁盘指定目录

解决: 起一个开发服务器, 在电脑内存中打包, 缓存一些已经打包过的内容, 只重新打包修改的文件, 最终运行加载在内存中给浏览器使用

webpack-dev-server自动刷新

启动本地服务, 可实时更新修改的代码, 打包变化代码到内存中, 然后直接提供端口和网页访问

  1. 下载包

    npm install webpack-dev-server -D

  2. 配置自定义命令

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

  3. 运行命令-启动webpack开发服务器

    npm run serve

总结: 改了src下的资源代码, 就会直接更新到内存打包, 然后反馈到浏览器上了

webpack-dev-server配置

  1. 在webpack.config.js中添加服务器配置

    更多配置参考这里: webpack.docschina.org/configurati…

    module.exports = {
    // ...其他配置
    // 开发环境 development
    mode: "development",
    // 生成环境 production ----↑
    devServer: {
      port: 3000 // 端口号
    }
}
avatar
文章
阅读
粉丝