Mac下Webpack初探

最新推荐文章于 2023-03-09 14:07:25 发布
最新推荐文章于 2023-03-09 14:07:25 发布
阅读量1.5k 收藏 4
点赞数 1
分类专栏： Mac Webpack 文章标签： Mac Webpack NodeJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bibifeng/article/details/80570141
版权
本文详述了在Mac操作系统下如何安装和使用Webpack，包括Node.js的安装、项目初始化、Webpack及其CLI的安装过程，并通过一个简单的JS文件打包案例展示了Webpack的基本用法。
摘要由CSDN通过智能技术生成
前言：这篇文章用来记录mac下的webpack安装与使用，以及后续的与webpack相关的一些配置，文章会持续不定期更新，转载请注明出处。

Webpack初体验

一、什么是Webpack

        Webpack其实可以看做一个模块打包机，将你项目中的一些浏览器无法直接运行的文件（如 Javascript、Scss）进行打包，使之可直接供浏览器使用。

二、为什么要用Webpack

        看到一篇文章很详细说明了使用Webpack的原因，传送门

三、使用Webpack的准备工作以及项目初始化

  • 首先需要进行node.js的安装（必备），我安装的是左边这个版本

    安装完成之后，打开mac的终端，检查是否成功安装。输入 node -v （-v前有空格）如果已经安装成功，会显示版本信息

        

最低0.47元/天 解锁文章
Bibifeng
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Mac 版的最详细 yarn+webpack 配置过程
2301_77482405的博客
12-30 433
yarn配置webpack环境。新建文件夹 在你想建的目录下。在vscode中打开即可。收到版本号就为安装成功。
gSOAP 安装过程
iw1210的专栏
04-14 5057
gSOAP 安装过程 系统环境 操作系统：CentOS 6.3 gSOAP：gsoap_2.8.17.zip 1. 解压 gsoap_2.8.17.zip，进入 gsoap-2.8 目录。 2. 执行configure # ./configure 如果出现如下问题： configure: error: C++ compiler cannot create execu
Mac 安装webpack详细示例
oh_coding的博客
03-09 776
Mac 安装webpack详细示例
Mac 安装webpack
qq_45989363的博客
06-23 2298
1.用npm的方式安装，首先你要安装node.js,地址https://nodejs.org/en/download/下载安装 2、安装完看有没有安装成功，看下版本,打开终端输入：node -v【查看node版本】、npm -v【查看npm版本】 3(必)、在终端里输入： sudo -s 回车，输入你的开机密码回车 （为什么必须：管理员模式才能进行安装） 4、全局安装webpack：npm install webpack -g 回车 leilei@leileideMacBook-Air ~..
webpack4.0在Mac下的安装配置及踩到的坑
xiaozhen0610的博客
08-18 718
一、什么是webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。 • webpack4.0 安装与环境配置在安装webpack4.0之前，需要安装node，node自带npm
详解webpack自定义loader初探
01-19
最近负责的Weex项目涉及到一些构建上的问题，需要通过自定义webpack的loader去实现，于是学习了一下这方面的知识，写一篇文章做个总结，以免遗忘。 webpack想必前端圈的人都知道了，大多数人也都或多或少的用过。...
vue init webpack 依赖的webpack包
09-05
解决vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 20.205.243.166:443问题，方便在https://github.com/vuejs-templates/webpack 不通的时候下载。 使用方法： 1、将webpack放到C...
webpack-develop.zip
11-01
4. **热模块替换（Hot Module Replacement, HMR）**：在开发过程中，启用HMR可以实现在不刷新页面的情况下更新代码，提高开发效率。 5. **代码分割**：Webpack能够自动识别并拆分出按需加载的代码块，减少首屏加载...
webpack5配置之vue3
最新发布
12-14
基于webpack5构建的vue3项目，可用来学习webpack5的常用配置，和常见优化。https://webpack.docschina.org/plugins/image-minimizer-webpack-plugin/#root。 基于webpack5构建的vue3项目，可用来学习webpack5的常用...
webpack安装包
11-24
Webpack 是一个前端资源模块化和打包工具，它允许开发者将应用程序分解为小块（模块），然后根据需要在浏览器中加载这些模块。Webpack 的核心概念是“一切皆模块”，包括 HTML、CSS、JavaScript 以及图片等静态资源...
webpack打包构建流程
03-13
webpack 打包构建流程 在了解 webpack 打包构建流程之前，我们需要了解一些基本概念。Webpack 是一种流行的前端构建工具，它可以将多个 JavaScript 文件打包成一个文件，以便于浏览器加载。webpack 的核心概念是 ...
webpack简单入门教程
04-26
Webpack 是一个现代JavaScript应用程序的模块打包工具，它将应用程序的所有依赖关系进行静态分析，并将其打包成一个或多个浏览器可理解的文件。这个简单的入门教程将引导你了解Webpack的基本概念和配置，让你快速...
webpack.zip
01-28
这里可能演示了如何配置Babel与Webpack一起使用，确保项目中的现代JavaScript特性能在各种环境下正常运行。 通过这些示例和讲解，开发者能够深入理解Webpack的工作机制，掌握如何编写和配置Webpack配置文件，以及...
Webpack笔记.md
04-13
webpack的搭建和项目的整体的构架
webpack打包Ts简易搭建
06-29
- 它会解析 `src` 目录下的 TypeScript 文件，通过 `tsconfig.json` 的设置进行编译。 - 编译后的 JavaScript 文件会被 Loaders 处理，例如用 Babel 将 ES6+ 语法转换为浏览器兼容的 ES5。 - Webpack Dev Server ...
怎么在mac端配置webpack
Roikehiya的博客
11-22 874
- 首先要安装node.js node.js官网下载 这里安装和安装软件一样 很简单，就不过多地介绍了 记得安装mac版本的 安装完成后在 终端 输入node -v以及npm -v查看node版本检验是否安装成功 - 然后就可以开始安装webpack了 在windows系统下 只需要使用npm install webpack -g进行全局安装 但是在mac直接这样会报错 报错提示电脑...
mac下WebPack 安装
dsdj
02-08 2452
webpack安装 首先必须要先安装nodejs nodejs可以直接去官网下载mac 推荐使用本地安装，不建议用全局安装。因为我们不同的项目可能使用不同的版本号 安装步骤演示如下: 第一、初始化package.json文件 进如一个空的文件夹 # 1.初始化package.json文件 10:webpack-learning cll$ npm init -y Wrote to /User...
webpack系列之安装（Mac OS）
weixin_30564785的博客
06-18 548
1. webpack介绍，可参考Webpack中文文档 2.安装webpack之前先需要安装npm，可参看NPM的使用介绍 3.安装webpack，可参考Webpack入门教程 =========================================================== 以下我具体说一下我安装的过程，及在此过程遇到的一些问题与解决办法 1. 先...
webpack系统配置
duansamve的博客
07-22 6639
简言之，webpack 是一个模块打包器 (module bundler)，能够将任何资源如 JavaScript 文件、CSS 文件、图片等打包成一个或少数文件。 为什么要用Webpack? 首先，定义已经说明了 webpack 能将多个资源模块打包成一个或少数文件，这意味着与以往的发起多个 HTTP 请求来获得资源相比，现在只需要发起少量的 HTTP 请求。 其次，webpack 能将你...
mac怎样安置webpack
07-08
安装Webpack的步骤如下： 1. 确保已经安装了Node.js和npm（Node.js的包管理器）。你可以在终端中运行以下命令来检查它们是否安装成功： ``` node -v npm -v ``` 如果显示了对应的版本号，则说明已安装成功。 2. 在终端中进入你的项目目录，运行以下命令来初始化一个新的npm项目： ``` npm init -y ``` 这将创建一个默认的`package.json`文件，用于管理项目的依赖。 3. 接下来，安装Webpack和相关的依赖。运行以下命令： ``` npm install webpack webpack-cli --save-dev ``` 这将安装Webpack和Webpack命令行工具（webpack-cli）作为开发依赖项。 4. 创建一个Webpack配置文件。在项目根目录下创建一个名为`webpack.config.js`的文件，并添加以下基本配置： ```javascript const path = require('path'); module.exports = { entry: './src/index.js', // 入口文件路径 output: { filename: 'bundle.js', // 输出文件名 path: path.resolve(__dirname, 'dist'), // 输出目录路径 }, }; ``` 这个配置文件指定了入口文件和输出文件的路径。 5. 在`package.json`文件中，添加一个脚本命令来运行Webpack。在`scripts`字段中添加以下内容： ```json "scripts": { "build": "webpack --config webpack.config.js" } ``` 这将允许你使用`npm run build`命令来运行Webpack。 现在，你可以使用Webpack来构建和打包你的项目了。运行以下命令： ``` npm run build ``` Webpack将会根据配置文件进行打包，并将输出文件保存在`dist`目录下。 希望这些步骤能帮助你成功安装和配置Webpack！如果你有任何问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值