node 第二十一天 webpack 初见

2024-01-12 23:04
文章标签 node webpack 初见 第二十一

本文主要是介绍node 第二十一天 webpack 初见，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

  1. 为什么需要学习（了解）webpack
    webpack是前端工程化的基石，webpack又是基于node进行文件打包bundle，所以作为前端起手学习node服务端开发，同时学习webpack是很有必要的。
    随着vite的出现，vue这一脉可能也许不再需要学习webpack了，但是需要知道的是，打包一定是前端工程化绕不开的一个概念，如果是一个足够了解webpack的开发者，日后再学习任何一款前端构建工具都将事半功倍。
    但是webpack本身却是是复杂的。真要深入学习付出是必不可少的。
    经过基础学习之后能够具备对问题顺藤摸瓜的能力，这是基础要求。

  2. webpack概念

    本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

  3. webpack核心配置项

    • webpack.common.js 基本配置项 入口(entry)， 出口(output)， 插件(plugins)，模块打包(loader)
      const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const MyPlugin = require('./myPlugin');module.exports = {// 入口 可多个entry: './src/main.js',// 出口 可多个output: {path: path.resolve(__dirname, 'dist'),filename: 'build.js'},// 插件plugins: [new webpack.DefinePlugin({VERSION: JSON.stringify('1.0.0')}),new HtmlWebpackPlugin({ template: './public/index.html', title: 'webpack app' }),new MyPlugin()],// 模块loadermodule: {rules: [{test: /\.css$/i,use: ['style-loader', 'css-loader', './myLoader']}]}
};
    • webpack.dev.js 开发环境配置项 代理服务器(devServer) 调试工具(devtool)
      const { merge } = require('webpack-merge');
const path = require('path');
const common = require('./webpack.common.js');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');module.exports = merge(common, {plugins: [new BundleAnalyzerPlugin({analyzerPort: 8888,openAnalyzer: false})],// 模式mode: 'development',// devServerdevServer: {static: {// 告诉服务器从哪里提供内容。只有在你希望提供静态文件时才需要这样做。static.publicPath 将会被用来决定应该从哪里提供 bundle，并具有优先级。publicPath: '/',directory: path.join(__dirname, 'public')},host: 'localhost',port: 8080,open: true},// source-map 会在webpack打包生成的文件模块的末端 加上 //# sourceURL=// 映射source-mapdevtool: 'inline-source-map'
});
    • webpack.prod.js 生产环境配置项 externals(打包剔除优化)
      const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = merge(common, {plugins: [new CleanWebpackPlugin(),new BundleAnalyzerPlugin({analyzerPort: 1055,openAnalyzer: false})],// 模式mode: 'production',// externals key: value// key和 import jQ from 'jquery'; 中的 'jquery' 一样// value 用于替换 import jQ from 'jquery' 中的jQ// 所以 value 必须和cdn引用暴露的window变量一样externals: {jquery: 'jQuery'}
});

  4. main.js 顺着main.js我们往下看

    import './style.css';import jQ from 'jquery';const str = 'hello webpack';
// 再webpack中
// 告知 webpack 将 process.env.NODE_ENV 设置为一个给定字符串。
// 如果 optimization.nodeEnv 不是 false，则会使用 DefinePlugin，optimization.nodeEnv 默认值取决于 mode，
// 如果为 falsy 值，则会回退到 "production"。
console.log(process.env.NODE_ENV);
//打包常量直接替换为 console.log('hello webpack');
console.log(str);
//生产环境用cdn
console.log(jQ);
//webpack.DefinePlugin
console.log(VERSION);// 开启 devtool: 'inline-source-map' 方便调试
// console.log(VERSION.t.t);

  5. 实现js文件中引入css
    因为在webpack.common.js中配置了css模块的loader，这样webpack就能知道怎么去处理对应的文件，以及处理之后给js暴露一个什么样的对象

  6. 生产环境不将jquery打包，改用cdn引入
    因为在webpack.prod.js中配置了打包剔除优化（externals），结合使用插件HtmlWebpackPlugin 结合 ejs语法, 在html模板中实现生产环境使用cdn引入jquery，当然此处还涉及了如何判断开发环境和生产环境，用到了一个node进程对象变量process.env.NODE_ENV 默认情况取决于webpack配置项mode的值
    html模板如下

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title><%= htmlWebpackPlugin.options.title %></title><% if (process.env.NODE_ENV === 'production' ) { %><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><% } %></head><body><h1>hello webpack server</h1></body>
</html>

  7. 使用DefinePlugin 在 编译时 将代码中的变量替换为其他值或表达式
    这里你也可以用来区分开发环境和生产环境而不是使用process.env.NODE_ENV , 在main.js中我们输出了一个被定义为字符串1.0.0的VERSION，console.log(VERSION); ==> console.log('1.0.0');

  8. 实现MyLoader MyPlugin 在cmd控制台打印MyLoader… MyPlugin… 自定义规则需要结合文档

    module.exports = function (source) {const content = source;console.log('MyLoader...');return content;
};
//loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)
//盲猜源码用了pop()

    module.exports = class MyPlugin {apply(compiler) {// 找到合适的事件钩子，实现自己的插件功能compiler.hooks.emit.tap('MyPlugin', () => {// compilation: 当前打包构建流程的上下文console.log('MyPlugin...');});}
};

这篇关于node 第二十一天 webpack 初见的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/599441。

相关文章

Node.js学习记录（二）

Node.js学习记录（二）

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件
阅读更多...
Node Linux相关安装

Node Linux相关安装

下载经编译好的文件cd /optwget https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.gztar -xvf node-v10.15.3-linux-x64.tar.gzln -s /opt/node-v10.15.3-linux-x64/bin/npm /usr/local/bin/ln -s /opt/nod
阅读更多...
在Debian 8上安装Node.js的方法

在Debian 8上安装Node.js的方法

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。 简介 Node.js 是一个通用编程的 JavaScript 平台，允许用户快速构建网络应用程序。通过在前端和后端都使用 JavaScript，开发可以更加一致，并且可以在同一个系统中设计。 在本指南中，您将在 Debian 8 服务器上安装 Node.js。Debian 8 包含一个版本的
阅读更多...
使用Node-API进行异步任务开发

使用Node-API进行异步任务开发

一、Node-API异步任务机制概述         Node-API异步任务开发主要用于执行耗时操作的场景中使用，以避免阻塞主线程，确保应用程序的性能和响应效率。         1、应用场景： 文件操作：读取大型文件或执行复杂的文件操作时，可以使用异步工作项来避免阻塞主线程。网络请求：当需要进行网络请求并等待响应时，可以使用异步工作项来避免阻塞主线程，从而提高应用程序的响应性能。数据库操
阅读更多...
Node.js学习记录（一）

Node.js学习记录（一）

目录 一、文件读取 readFile 二、写入文件 writeFile 三、动态路径 __dirname：表示当前文件所处的目录、path.join 四、获取路径文件名 path.basename 五、提取某文件中的css、JS、html 六、http 七、启动创建web服务器 服务器响应 八、将资源请求的 url 地址映射为文件的存放路径 九、模块 模块加载 模块作用域
阅读更多...
ubuntu安装node的问题

ubuntu安装node的问题

初学node，按照书上的流程安装nodejs，当安装canvas的时候（npm install canvas）遇到问题 node-gyp rebuild 然后就卡住了，查了下，基本上就是各种依赖问题，几经折腾就在要放弃的时候，终于在网上发现node官方wike https://github.com/Automattic/node-canvas/wiki/Installation---Ubun
阅读更多...
node快速复制文件或文件夹，排除部分文件（node_modules）

node快速复制文件或文件夹，排除部分文件（node_modules）

const fs = require('fs')const path = require('path')/*** @description: 获取完整的文件路径* @param {*} url 路径* @return {*} 返回完整的文件路径*/const getPath = (url) => {return path.join(__dirname, url)}/*** @descr
阅读更多...
Node.js和vue3实现GitHub OAuth第三方登录

Node.js和vue3实现GitHub OAuth第三方登录

Node.js和vue3实现GitHub OAuth第三方登录 前言 第三方登入太常见了，微信，微博，QQ…总有一个你用过。 在开发中，我们希望用户可以通过GitHub账号登录我们的网站，这样用户就不需要注册账号，直接通过GitHub账号登录即可。 效果演示 注册配置 GitHub 应用 1.首先登录你的GitHub然后点击右上角的头像->点击进入Settings页面 2.在
阅读更多...
Node.js入门与生态全解析：包管理与构建工具详解

Node.js入门与生态全解析：包管理与构建工具详解

Node.js入门与生态全解析：包管理与构建工具详解 目录 🎯 包管理 使用 npm 和 yarn：项目依赖管理的利器创建和发布 npm 包：实现模块化与共享 ⚙️ 构建工具 使用 Webpack 和 Babel：高效打包与代码转换配置构建流程：优化与自动化的最佳实践 🎯 包管理 - 使用 npm 和 yarn：项目依赖管理的利器 在Node.js的开发过程中，包管理是核心环节
阅读更多...
vite是如何实现依赖预构建的，浏览器为什么没有实现从node_modules查找依赖，vite开发环境解决了什么问题

vite是如何实现依赖预构建的，浏览器为什么没有实现从node_modules查找依赖，vite开发环境解决了什么问题

浏览器的esmodule 为什么没有做从node_modules查找依赖项 浏览器是基于http请求的，node_modules中依赖项不可控，可能又会依赖很多的包，整个依赖图都需要加载的话很耗性能。 commonjs是运行在服务端的，以file形式读取文件，内部有规避机制。 依赖预构建 首先vite会找到对应的依赖，然后调用esbuild(对js语法进行处理的一个库)，将其他规范的代码转换
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2