• webpack工具包

    webpack的基本介绍

    官方概念：是一个现代JavaScript应用程序的静态模块打包器
    静态：文件资源
    模块：node环境，引入文件，遵循模块化语法
    除了合并代码，还能翻译和压缩代码
    作用：

    • 静态模块打包器
    • 翻译和压缩代码
    • 减小代码包体积，让浏览器更快速的打开网页

    学习webpack的准备工作

    1. 安装一个node
    2. npm init 初始化这个项目，生成package.json文件
    3. 安装并使用webpack

    安装并使用webpack

    注意：

    • webpack是一个工具，对于所有的项目都可以来使用
    • 不同的项目使用了不同的webpack版本，所以不推荐全局安装，打开老项目的时候，一定要注意版本号
    • 采用局部安装，只是开发依赖，并不是生产依赖 ，在命令行加上-D
    • 命令如下

    npm i webpack webpack-cli -D

    • 检测是否安装成功

    npx webpack -v

    修改用模块化的方式来改写代码

    在tool.js导出模块

    const updateDom = (id, content) => {
    window.document.getElementById(id).innerHTML = content
}
//导出
module.exports = {
    updateDom
} 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在index.js中导入模块

    //导入 
const { updateDom } = require('./tool.js')
updateDom('app', 'index.html') 

    • 1
    • 2
    • 3

    由于现在在index.js使用了require这种模块化的处理方式，所以它无法直接在浏览器中使用，如果直接在index.html中引用，浏览器会报错

    使用webpack来做打包

    命令如下
    npx webpack 文件名
    如果没有错误，会生成一个dist的文件夹，里面有一个main.js的文件，说明打包已经操作成功

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G3CSYhz2-1656592111914)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af9880ddacf04fba8ec3170e9c08a447~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

    引入打包后的js

    <!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>

<body>
    <div id="app">

    </div>
    <!-- 引入打包后的js文件 -->
    <script src="./dist/main.js"></script>

</body>

</html> 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CXqLnB4O-1656592111914)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8380029b1c6247d6855446a123bea1e0~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

    为什么要用webpack

    1. 有效的处理模块化
    2. 把多个相互引用的.js文件打包成一个文件，能够压缩和加密文件，使文件上线更安全
    3. 在这个过程中nodejs的作用，它是webpack运行的基础，最终生成的main.js文件还是在浏览器中运行的

    webpack的配置文件

    创建并使用默认配置文件

    • 在项目的根目录下，创建一个webpack.config.js的文件

    内容如下：

    module.exports = {
  mode: 'development', // 打包方式
} 

    • 1
    • 2
    • 3

    作用：导出一个配置项，用来对webpack的打包行为做设置

    了解入口和出口

    入口文件：指定了webpack从哪个文件开始工作，在它的内部会引入其他的模块
    出口文件：指定了最后打包之后的文件
    在webpack中的默认出口和入口是：

    • 默认入口：./src/index.js
    • 默认出口：./dist/main.js

    如果直接在根目录下运行webpack，它会直接去找.src下的index.js，并把打包之后的代码放在dist/main.js下 直接省略入口文件，直接打包npx webpack

    设置入口文件

    • 在src目录下，新建一个js文件夹，把index.js改成main.js，并把tool.js放在里面
    • 修改配置项，添加entry项

    entry: './src/js/main.js'

    设置出口文件

    • 修改配置项，添加output项
    • 把出口文件设置为在build目录下的bundle.js

    1、引入nodejs中的path模块
    2、在output项中，设置出口文件的绝对路径和文件名称

     output: {
        //设置路径
        path: path.join(__dirname, '/build'),
        // 设置名称（默认情况下叫main.js）
        filename: 'bundle.js'
    } 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    修改打包的模式

    mode项用来设置打包的方式，如果不设置默认为production
    development:开发模式（代码不会混淆，压缩）
    production：生产模式（压缩、混淆、加密 不可读）

    在打包的时候指定配置文件

    自己创建一个webpack.dev.js的文件，用来做配置文件
    内容如下：

    module.exports = {
  output:{
    filename:'boundle.js'
  }
} 

    • 1
    • 2
    • 3
    • 4
    • 5

    我们希望使用我们配置的文件来设置打包
    格式如下： npx webpack --config webpack的配置文件

    简化打包命令

    定制script
    在package.json中添加script命令来快速启动webpack

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d1wVcJWX-1656592111915)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3a4ff1bfb2047bb94138da36ea14a8c~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)] 在script中不需要再添加npx,它会自动在node_modules/.bin中去找命令
    这样我们就得到了两个命令，dev和build
    可以在小黑窗中运行： npm run build,npm run dev来运行

    小结

    • webpack的配置文件默认名是webpack.config.js，也可以单独指定
    • 学习webpack就学习webpack.config.js的使用。
    • 把webpack的命令集成到script中可以简化打包命令。
    • 可以自行定义入口和出口文件

    loader

    在webpack看来，一切皆模块

    loader处理css文件

    1. 在js中导入css文件
    2. 安装一个css-loader包,在配置文件中配置module
    3. 安装style-loader包,再进行配置,style写在css的前面
    4. 在html文件中引入生成的打包好的js文件

    loadedr处理less文件

    • 在js文件中导入less文件
    • 安装一个less-loader包，在配置文件中加一个配置less文件的对象
    • less-loader写在css-loader的后面
    • 在html文件中引入生成的打包好的js文件
  • 相关阅读:
    window10安裝mysql8.0.18
    leetcode-剑指 Offer II 001. 整数除法
    【C语言学习笔记---指针进阶02】
    什么是开源？为什么要坚持开源？
    《自然语言处理实战入门》 基于知识图谱的问答机器人
    Pytest+Allure生成自动化测试报告！
    7.nodejs--egg框架简介、以及get、post请求
    ETCD快速入门-01 ETCD概述
    功能测试自动化测试流程
    【无标题】
  • 原文地址：https://blog.csdn.net/web220507/article/details/125547747