Webpack 学习笔记

最新推荐文章于 2024-09-01 20:06:44 发布
最新推荐文章于 2024-09-01 20:06:44 发布
阅读量97 收藏 1
点赞数
分类专栏： 项目搭建 文章标签： node.js javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44659458/article/details/120623760
版权

Webpack 笔记

安装 webpack

前置条件安装了 node

  • 全局安装 webpack 及 webpack-cli
    • npm install -g webpack --registry=https://registry.npm.taobao.org
    • npm instal -g webpack-cli --registry=https://registry.npm.taobao.org

快速入门

  • 创建项目并初始化项目

  • 创建并配置 webpack 文件（webpack.config.js）

    // 导入 path 模块 （处理路径）
var path = require('path');

// module 模块系统对象
// exports 配置选项
module.exports = {
    // 入口文件
    entry: "./src/index.js",
    // 设置模式 development（开发模式） production 生产环境
    mode: "development",
    // 输出
    output: {
        /*
          __dirname: 项目的绝对路径
          打包后的文件存放在 dist 目录下
         */
        path: path.resolve(__dirname, "dist"),
        // 设置打包后的文件名称
        filename: "bundle.js"
    }
}

多入口文件时

entry: {

​ index: “./src/index.js”,

​ detail: “./src/detail.js”,

}

  • 入口文件（index.js）

    var rd = function (min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

document.write(rd(100, 200)+"<br/>");
document.write(rd(100, 200)+"<br/>");
document.write(rd(100, 200)+"<br/>");
document.write(rd(100, 200)+"<br/>");
document.write(rd(100, 200)+"<br/>");

  • 打包项目

    webpack --config webpack.config.js

开发模式下

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/***/ (() => {

eval("var rd = function (min, max) {\r\n    return Math.floor(Math.random() * (max - min) + min);\r\n}\r\n\r\ndocument.write(rd(100, 200)+\"<br/>\");\r\ndocument.write(rd(100, 200)+\"<br/>\");\r\ndocument.write(rd(100, 200)+\"<br/>\");\r\ndocument.write(rd(100, 200)+\"<br/>\");\r\ndocument.write(rd(100, 200)+\"<br/>\");\r\n\n\n//# sourceURL=webpack://project01/./src/index.js?");

/***/ })

/******/ 	});
/************************************************************************/
/******/ 	
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	// This entry module can't be inlined because the eval devtool is used.
/******/ 	var __webpack_exports__ = {};
/******/ 	__webpack_modules__["./src/index.js"]();
/******/ 	
/******/ })()
;

生产模式下

(()=>{var r=function(r,t){return Math.floor(Math.random()*(t-r)+r)};document.write(r(100,200)+"<br/>"),document.write(r(100,200)+"<br/>"),document.write(r(100,200)+"<br/>"),document.write(r(100,200)+"<br/>"),document.write(r(100,200)+"<br/>")})();

打包项目也可以使用 npm run build

前提是在项目的 package.json 中配置好选项

打包 CSS 文件

在 src 目录下创建 css 文件（base.css）,并在入口文件（index.js）中引入文件

import './base.css'
  • 配置 webpack.config.js
var path = require('path');
module.exports = {
    entry: "./src/index.js",
    mode: "development",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    }
    // 配置 loader 模块
    module: {
        rules: [
            {
                // 打包 css 文件
                test: /\.css$/i,
                use: [
                    "style-loader", 
                    "css-loader"
                ]
            }
        ]
    }
}

配置前需要下载插件 style loader css-loader

npm install --save-dev style-loader

npm install css-loader

  • 打包文件并启动项目

    测试方法：在生产的dist 文件中创建一个 html 文件 并将 bundle.js 引入后，打开该文件，此时可以看到 css 样式是否加载成功

打包 scss

安装 sass-loader sass

npm install sass-loader sass --save-dev

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 3 最后把 javascript 写入到bundle.js
          "style-loader",
          // 2 再把 css 转成 javascript
          "css-loader",
          // 1 将 sass 编译为 css
          "sass-loader",
        ],
      },
    ],
  },
};

打包图片文件

安装 url-loader

npm install url-loader – save-dev

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

编译ES6语法

安装 babel-loader

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

D 等价于 save-dev

module: {
  rules: [
    {
      test: /\.m?js$/,
      // 排除 node_modules 目录下的文件
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', { targets: "defaults" }]
          ]
        }
      }
    }
  ]
}

处理 html 模板

安装 html-webpack-plugin

npm i -D html-webpack-plugin

// 打包项目所需的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');//处理html模板文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//处理dist目录多余的文件(冗余)

// 处理路径的模块
var path = require("path");
// 在模块系统下进行配置
module.exports = {
    // 入口文件 (多文件)
    entry: {
        "index": "./src/index.js",
        "detail": "./src/detail.js"
    },
    //  打包模式 development | production
    mode: "production",
    // 输入设置
    output: {
        // 路径
        path: path.resolve(__dirname, "dist"),
        // 名称
        filename: "js/bundle-[name].js"
    },
    module:{},
    //  配置插件
    plugins: [
        // 处理html模板
        new HtmlWebpackPlugin({
            title: "首页", // 网页标题
            template: "./src/views/index.html",//网页模板
            filename: "index.html",// 文件名称
            chunks:["index"] // 添加的脚本 和entry对象下的key是一一对应！！
        }),
        new HtmlWebpackPlugin({
            title: "详情页",
            template: "./src/views/detail.html",
            filename: "detail.html",
            chunks:["detail"]
        }),
		new CleanWebpackPlugin()
    ]
}

处理模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
    <h1>Hello world</h1>
</body>
</html>

完整版

// 打包项目所需的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');//处理html模板文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//处理dist目录多余的文件(冗余)

// 处理路径的模块
var path = require("path");
// 在模块系统下进行配置
module.exports = {
    // 1.0 入口文件 (多文件)
    entry: {
        "index": "./src/index.js",
        "detail": "./src/detail.js"
    },
    // 2.0 打包模式 development | production
    mode: "production",
    // 3.0 输入设置
    output: {
        // 路径
        path: path.resolve(__dirname, "dist"),
        // 名称
        filename: "js/bundle-[name].js"
    },
    // 4.0 配置loader模块
    module: {
        rules: [
            // 打包css文件
            {
                test: /\.css$/i,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },
            // 打包scss文件（sass）
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 3. 最后把javascript写入到 bundle.js 文件中
                    "style-loader",
                    // 2. 再把css转成 javascript
                    "css-loader",
                    // 1. 将sass编译为css
                    "sass-loader"
                ]
            },
            // 打包图片文件
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 1KB = 1024Bytes  
                            // 如果图片大小限制 小于等于8192Bytes  转base64格式字符串（图片文件）
                            // 如果超过8192Bytes 就是显示原来的图片
                            limit: 8192
                        }
                    }
                ]
            },
            // 编译ES6
            {
                test: /\.m?js$/,
                // 排除node_modules目录的JS文件
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', { targets: "defaults" }]
                        ]
                    }
                }
            }
        ]
    },
    // 5.0 配置插件
    plugins: [
        // 处理html模板
        new HtmlWebpackPlugin({
            title: "首页", // 网页标题
            template: "./src/views/index.html",//网页模板
            filename: "index.html",// 文件名称
            chunks:["index"] // 添加的脚本 和entry对象下的key是一一对应！！
        }),
        new HtmlWebpackPlugin({
            title: "详情页",
            template: "./src/views/detail.html",
            filename: "detail.html",
            chunks:["detail"]
        }),
		new CleanWebpackPlugin()
    ]
}
海面有风
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webpack学习笔记
09-26
webpack学习笔记，总结了实际开发过程中的实际问题，并进行了梳理，便于直接查找使用；同时也对于目前市面上的资源进行了借鉴，梳理成为可以简单查找，就可以找到对应的思路，便于使用，方面了自己，也节省了时间。
webpack：:scroll:一些节点教程-《 Webpack学习笔记》
02-06
Webpack 是一个流行的模块...通过《Webpack学习笔记》这样的教程，你可以逐步掌握Webpack的基础和进阶用法，将其有效地应用于项目中，实现高效、模块化的前端开发。在学习过程中，不断实践和查阅官方文档是至关重要的。
webpack 学习笔记
weixin_43350001的博客
03-14 952
webpack 学习笔记 文章目录webpack 学习笔记什么是webpack？webpack 使用（问题引出）webpack的安装和配置webpack中的默认约定使用webpack插件webpack配置中的devServer 节点webpack中的loader打包处理CSS文件打包处理Less文件打包处理样式表中与url路径相关的文件打包处理JS文件中的高级语法打包发布配置 webpack 的打包发布把图片文件统一放到 image 目录中自动清理 dist 目录下的旧文件Source Map默认Sourc
Webpack学习笔记
qq_45707021的博客
07-11 235
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mDTPuj5f-1689042707139)(C:\Users\mzhj\AppData\Roaming\Typora\typora-user-images\image-20230705221304210.png)]
webpack学习笔记之代码分割和按需加载的实例详解
12-01
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。在构建大型应用时，随着代码量的增加，一次性加载所有代码可能导致页面加载速度变慢，用户体验下降。为了解决这个问题，Webpack 提供了代码分割（Code ...
webpack学习笔记之优化缓存、合并、懒加载
01-19
除了的webpack基本配置，还可以进一步添加配置，优化合并文件，加快编译速度。下面是生产环境配置文件webpack.production.js，与wenbpack.config.js相比其不需要一些dev-tools,dev-server和jshint校验等，将与开发...
Node.js中离线集成ip2region：实现高效的IP地址定位
软考鸭
08-29 724
ip2region是一个离线IP地址定位库，支持多种编程语言，包括Node.js。其准确率高达99.9%，查询效率也非常高，非常适合在需要IP地址定位的场景中使用。下面是在Node.js项目中如何使用ip2region的详细步骤。
node.js使用express框架实现api接口开发（从零开始，超简单可直接复制）
weixin_42966151的博客
08-26 466
新建一个node项目，在webstorm中依次点击【文件】-【新建】-【项目】，然后选中nodejs项目，给项目取名test1。
Node.js中sqlite3的db.run、db.get和db.all方法深入解析
软考鸭
09-01 390
SQLite是一个轻量级的数据库，它不需要单独的服务器进程或操作系统，数据库就是一个或多个磁盘文件的集合。方法分别用于执行不返回结果的SQL语句、查询并返回第一行数据和查询并返回所有行数据。通过了解这些方法的API原型定义和相应的代码示例，我们可以更加灵活地进行数据库的增删改查操作。在Node.js中，sqlite3是一个广受欢迎的轻量级数据库库，它提供了一个简洁的API来与SQLite数据库进行交互。方法用于执行SQL语句，它不返回查询结果，只返回操作的影响行数。如果查询结果为空，则返回一个空数组。
Node.js sqlite3的db.close方法：正确关闭数据库连接
软考鸭
09-01 291
在Node.js环境中，sqlite3是一个广受欢迎的轻量级数据库库，它为开发者提供了一个简洁的API来与SQLite数据库进行交互。当完成数据库操作后，正确关闭数据库连接是一个重要的步骤，以确保资源得到释放并避免潜在的内存泄漏。方法的API函数定义和相应的代码示例解释，我们可以正确地关闭数据库连接，释放资源，并避免潜在的内存泄漏。方法是sqlite3库中的一个方法，用于关闭与SQLite数据库的连接。方法来关闭数据库连接。方法是sqlite3库中的一个重要方法，用于关闭与SQLite数据库的连接。
Node.js sqlite3事件深入解析：trace、profile、change、error、open
最新发布
软考鸭
09-01 392
在Node.js环境中，sqlite3库不仅提供了丰富的API用于数据库操作，还定义了一系列的事件，使得开发者能够监听和响应数据库操作过程中的各种状态变化。本文将深入解析sqlite3库中的trace、profile、change、error、open这五个事件，包括它们的作用、触发时机以及如何使用代码进行监听和处理。在这个示例中，我们首先创建了一个内存中的数据库，并监听了trace、profile、change、error和open事件。然后，我们执行了一些数据库操作，包括创建表、插入数据和查询数据。
vue ref和reactive区别
灰海
08-25 6613
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
jQuery基础——DOM
m0_54066656的博客
08-27 2163
JQ基础——DOM操作
python12 中，No module named‘distutils‘错误
热门推荐
qq_43557600的博客
08-27 1万+
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1126
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
layui栅格布局设置列间距不起作用
gc_2299的博客
08-26 940
记录layui栅格布局设置列间距不起作用的解决办法
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 301
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
Node.js与Webpack学习笔记：模块化构建详解
"这是关于Node.js、模块化以及Webpack的学习笔记，特别关注了在Vue项目中应用Webpack的细节。笔记涵盖了Node的基础知识，如命令行操作、环境变量、进程概念，以及Node.js的核心特性，包括其作为JavaScript服务器端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海面有风

您的鼓励将是我前进的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值