ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

webpack (静态模块打包工具) 手记

2021-09-22 17:02:40  阅读：176  来源： 互联网

标签：文件 less loader webpack 手记 模块 js css


  • 新建src 在下面创建 index.js (入口文件) 和 add.js

  • 下载安装webpack (npm run build 或 yarn build), 配置打包命令 build : webpack在这里插入图片描述

  • 默认入口src/index.js-要被打包的文件, 要引入到这里使用
    在这里插入图片描述

  • 输入yarn build打包命令(实际是项目环境webpack命令)

  • 输出代码到add/add.js中

修改入口与出口点

在这里插入图片描述
新建 webpack.config.js (注意路径)

//在里面添加
const path = require('path')

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

修改成功
在这里插入图片描述
在这里插入图片描述

隔行变色

  • 下载jquery
  • npm add jquery
  • 新建public/index.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="myUL">
      <!-- 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>

  • 新建src/main.js - webpack打包入口
    在这里插入图片描述

  • index.html 准备一些li

  • 在src/main.js引入jqueryimport $ from 'jquery'

  • main.js中编写, 隔行变色代码

$('#myUL li:even').css('color','red') //奇数筛选
$('#myUL li:odd').css('color','green') //偶数筛选
  • 执行打包命令
  • 把public/index.html手动复制到dist下
  • 再手动引入打包后bundle.js
    在这里插入图片描述

webpack-插件-自动生成html文件

下载 npm add html-webpack-plugin@5.3.1 -D
webpack.config.js配置

const path = require('path')
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/main.js', //入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), //出口文件
    filename: 'bundle.js', //出口文件名
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 以此为基准生成打包后html文件
      template: './public/index.html' //把对应路径的html进行打包
    })
  ]
}

重新打包后观察dist下

  • 自动生成了html文件
  • 自动引入打包后js文件
    在这里插入图片描述

自动生成html和引入打包后文件, 应该怎么做?

  • 下载 npm add html-webpack-plugin@5.3.1 -D 插件包, 给webpack.config.js配置上

说白了就是指定哪个html文件,给它生成到哪里去

webpack-加载器-处理css文件问题

在这里插入图片描述
webpack只识别js文件,默认无法打包css文件

webpack-加载器-处理css文件

  • css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
  • style-loader 把 CSS 插入到 DOM 中
  • 一起安装使用 npm add css-loader@5.2.1 style-loader@2.0.0 -D

在main.js中进行引入(入口文件)

import './css/index.css' //导入css代码

webpack.config.js 配置

module.exports = {
    // ...其他代码
    module: { // 如何处理项目中不同模块文件
        rules: [ // 规则
          {
            test: /\.css$/i, // 匹配所有的css文件
            // use数组里从右向左运行
            // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
            // 再用 style-loader 将样式, 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }
}

运行打包命令

  • css代码被打包进了dist/bundle.js中
  • 运行时, css代码插入到html的style标签中,样式可以正常生效

webpack-加载器-处理less文件

less-loader
webpack 将 Less 编译为 CSS 的 loader
首先，你需要先安装 less 和 less-loader

npm add less@4.1.1 less-loader@8.1.0 -D

webpack.config.js 配置

 module: { // 如何处理项目中不同模块文件
    rules: [ // 规则
      {
        test: /\.css$/i, // 匹配所有的css文件
        // use数组里从右向左运行
        // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
        // 再用 style-loader 将样式, 把css插入到dom中
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.less$/i, // 匹配.less结尾文件
        // 使用less-loader, 让webpack处理less文件, 内置还会用less模块, 翻译less代码成css代码
        use: ["style-loader", "css-loader", 'less-loader'] //顺序不能乱
        // less-loader 把less文件转css文件和代码
        // css-loader 把css代码打包进js中
        // style-loader 把css代码 -> 插入 -> DOM中
      }
    ]
  }
}

main.js(入口文件引入)

import './less/index.less' //导入less代码

一共用了四个包 处理css的包+处理less的包

webpack5-加载器-处理图片文件

资源模块

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader
在这里插入图片描述

  • webpack.config.js填写
module: {
    rules: [ 
        // ...省略其他
        {
            test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
            type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
            // 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
            // 大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)
        }
    ]
}

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

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

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

body {
  background: url(../assets/images/logo_small.png) no-repeat center;
}
  • webpack如何支持图片打包
    webpack5内置了, 只需要配置type:‘asset’
  • 对图片有哪两种处理方案
    默认8kb以下图片, 转成base64字符串打包进js中, 减少网络请求次数
    超过8kb的图片, 直接复制到dist下, 转base64会增加30%体积

webpack-加载器-处理字体文件

webpack.config.js

 {
        test: /\.(eot|svg|ttf|woff|woff2)$/, //匹配以eot svg ttf woff woff2为结尾的文件
        type: 'asset/resource',  // 当做静态资源直接复制文件
        generator: {
          filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左
          // [name] 占位符,使用源文件的名字
          // [hash] 设置是会添加6位哈希值,防止重名
          // [ext] 代表源文件的扩展名
        }
      }

main.js(入口文件)

// 目标,打包和使用字体图标
import './assets/fonts/iconfont.css'
let thtI = document.createElement('i')
thtI.className = 'iconfont icon-qq'
document.body.appendChild(thtI)

在html设置字体图标

打包,得到结果

webpack-加载器-处理高版本js语法

让webpack, 对高版本js语法降级

babel-loader
此 package 允许你使用 Babel 和 webpack 转译 JavaScript 文件

babel编译器=> 用于处理高版本 js语法 的兼容性
webpack配合babel-loader 对js语法做处理

  • src/main.js - 编写箭头函数
const fn = () => { // 高级语法
  console.log("你好babel");
}
console.log(fn) // 一定打印函数, 才会被webpack把"函数体"打包起来

安装对应包

npm add -D babel-loader@8.2.2 @babel/core@7.13.15 @babel/preset-env@7.13.15

在这里插入图片描述
webpack.config.js 配置

  {
            test: /\.js$/, // 匹配js结尾文件
            exclude: /(node_modules|bower_components)/, // 不转换这2个文件夹里的js
            use: { 
                loader: 'babel-loader', // 使用加载器-处理
                options: {
                    presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
                }
            }
        }

打包后观察dist/的js文件, 自动变成普通函数
在这里插入图片描述

webpack-开发服务器

在这里插入图片描述

  1. 构建入口和所有模块依赖关系图
  2. 磁盘读取对应的文件到内存, 才能加载
  3. 用对应的 loader 进行处理和翻译
  4. 将处理完的内容, 输出到内存里而非磁盘上
  5. 以后代码变化, 自动更新打包变化的代码, 显示到浏览器上

下载包

npm add webpack-dev-server@3.11.2 -D

webpack.config.js 配置
在这里插入图片描述

mode:'development', //开发环境,不加默认生产环境

package.json配置

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

运行命令-启动webpack开发服务器
npm run serve

启动一个web服务器和端口, 在浏览器访问查看

效果: 以后改src下的代码, 自动打包更新到浏览器上

webpack-开发服务器-配置

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

module.exports = {
    // ...其他配置
    devServer: {
      port: 3000, // 端口号
      open: true // 启动后自动打开浏览器
    }
}

运行
npm run serve
端口号改变,html自动弹出

webpack官网地址:
https://webpack.docschina.org/

标签：文件,less,loader,webpack,手记,模块,js,css
来源： https://blog.csdn.net/i_bilibili/article/details/120409530

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有