乐闻
如何把 webpack dev server 的默认端口从 ` 8080 ` 改成其他端口？更改webpack-dev-server的默认端口非常简单。通常，这个设置是在webpack的配置文件中进行的。以下是具体步骤：
1. **找到webpack的配置文件**：
在大多数项目中，这个文件名通常是 `webpack.config.js`。
2. **修改devServer配置**：
在这个配置文件中，你需要找到名为 `devServer`的部分。如果之前未设置过，你可能需要手动添加这一部分。
3. **设置port属性**：
在 `devServer`对象中，你可以设置一个名为 `port`的属性，其值为你希望的端口号。例如，如果你想更改端口到5000，你...
2024年8月9日 01:09
如何在现有项目中添加/集成 `vue-cli`？在一个已经存在的项目中添加 Vue CLI 主要是为了利用其提供的构建工具和配置，以便更加高效地开发和维护 Vue.js 应用程序。按照以下步骤可以将 Vue CLI 集成到现有项目中：
### 步骤 1: 安装 Vue CLI
首先，确保你已经安装了 Node.js。然后，通过 npm 安装 Vue CLI。在终端中运行：
```bash
npm install -g @vue/cli
```
这会全局安装 Vue CLI，使得你可以在任何项目中使用其命令。
### 步骤 2: 创建 vue.config.js
在你的项目根目录下创建一个名为 `vue.config.js`...
2024年5月12日 00:12
更改代码后如何让 webpack 自动重新编译？在使用Webpack进行项目构建时，如果您更改了项目中的文件，重新编译通常有以下几种方法：
### 1. 手动重新编译
如果您是通过命令行启动Webpack的，可以在修改完文件后，再次运行相同的构建命令。例如，如果您的构建命令是：
```bash
webpack --config webpack.config.js
```
修改文件后，只需再次运行这个命令即可。
### 2. 使用`webpack --watch`
Webpack提供了一种自动监控文件变化并重新编译的方式，即`--watch`选项。在启动Webpack时加上这个选项：
```bash
webpack --w...
2024年8月9日 01:07
如何在 Webpack 4 中使用 ES6 的 ` import `/` export `？在 Webpack 4 中支持 ES6 的 `import` 和 `export` 语法的方式是通过使用 Babel。Babel 是一个广泛使用的转译器，可以将 ES6 代码转换为向后兼容的 JavaScript 版本，以便在当前和旧版浏览器中运行。下面是整个配置过程的步骤：
### 1. 初始化 npm 项目
首先，您需要初始化一个新的 npm 项目（如果还没有的话）:
```bash
npm init -y
```
### 2. 安装 Webpack 和 Babel
接下来，安装 Webpack 及其 CLI 工具，同时安装 Babel 相关的包：
```bash
npm...
2024年6月1日 22:26
如何在 Storybook 中导入 SCSS 文件？在使用Storybook来构建组件库时，如果你希望在你的组件中使用SCSS样式，需要做一些配置来确保SCSS文件能正确编译。以下是步骤和例子说明如何在Storybook中使用SCSS：
### 1. 安装必要的依赖
首先，确保你的项目中已经安装了SCSS相关的依赖。如果没有，你需要安装 `sass-loader` 和 `sass` (Dart Sass)：
```bash
npm install --save-dev sass-loader sass
```
或者使用 yarn：
```bash
yarn add --dev sass-loader sass
```
### ...
2024年5月12日 00:12
如何在 Webpack 项目中找出未使用的文件？在进行Webpack项目开发的过程中，随着项目逐渐变大，可能会出现一些未被使用的文件，这些文件如果不及时清理，会增加项目的复杂度和维护难度。查找并移除这些未使用的文件是一个很好的优化步骤。以下是我通常采取的几个步骤来查找和处理Webpack项目中的未使用文件：
### 1. 使用`webpack-unused`插件
`webpack-unused`是一个专门用来查找未使用文件的工具。它可以帮助我们快速地找出那些在Webpack构建中没有被引用的文件。要使用这个工具，你可以通过npm或yarn安装它：
```sh
npm install --save-dev webpack-unus...
2024年6月1日 22:26
Webpack 的 ` publicPath ` 有什么作用？`publicPath` 是 Webpack 配置中非常重要的一项配置，它用于指定输出目录下的静态资源（如 JavaScript, CSS, 图片等）在浏览器中访问的可用路径。
具体来讲，`publicPath` 指定了打包生成的静态资源在运行时的引用路径前缀。比如说，如果我们在服务器上部署了一个应用，并且希望所有静态资源都放在 `/assets/` 路径下，我们可以将 `publicPath` 设置为 `/assets/`。这样，当Webpack打包过程中遇到代码里静态资源引用时（如图片、字体等），它会自动在资源的URL前面加上 `/assets/` 前缀。
### 示例：
假设我...
2024年3月3日 21:04
如何通过 Webpack 处理并在 CSS 中使用图片？在Webpack中使用CSS中的图像涉及几个步骤，主要是配置相应的loader，确保Webpack能正确处理和打包CSS文件中引用的图像资源。以下是具体的步骤和配置方法：
### 步骤 1: 安装必要的包
首先，确保你已经安装了webpack和相关loader。对于处理CSS和图像，我们通常需要以下几个包：
- `css-loader`: 解析CSS文件中的`@import`和`url()`表达式。
- `style-loader`: 将CSS插入到DOM中。
- `file-loader` 或 `url-loader`: 处理文件和图像引用。
通过npm或yarn安装这些包：
...
2024年8月9日 01:05
如何使用 webpack 构建一个 JSON 文件？当使用Webpack处理和构建项目时，通常会涉及各种资源类型，包括JavaScript、CSS、图片等。尽管JSON文件通常不需要构建，但了解如何将它们包含在Webpack的构建过程中是非常重要的，特别是当JSON数据需要在多个组件或模块中共享时。
### 使用Webpack处理JSON的步骤
1. **安装和配置Webpack**：
首先，确保您已经安装了Node.js和npm。然后，通过命令行安装Webpack及其CLI工具：
```bash
npm install --save-dev webpack webpack-cli
```
2. **创建We...
2024年8月9日 01:11
消息队列与 Socket 的区别### 消息队列与套接字的比较
#### 基本概念
**消息队列**是一种应用程序间的通信方法，用于在不同的进程或不同系统之间异步交换数据。数据以消息的形式发送，并且可以在消息队列中暂存，直到被接收方处理。
**套接字**是一种网络通信的端点，允许不同主机上的应用程序通过网络进行数据交换。套接字可以支持不同的通信协议，如TCP和UDP。
#### 使用场景和优势
**消息队列的优势：**
- **解耦**: 发送者和接收者不需要同时在线，消息可以在队列中存储，直到接收者准备好接收。
- **可靠性**: 消息队列可以保证消息至少被处理一次，或者根据配置，确保消息的准确传递。
-...
2024年5月11日 13:38