webpack学习—— webpack-dev-server(2)常用命令参数

格式:空格 – 参数名
在这里插入图片描述
webpack-dev-server 常用命令参数:

  1. open:是否自动开启浏览器,默认:false,当设置为true,开启dev-server服务的时候,会自动在浏览器打开项目。
  2. port :端口号 默认:8080 可以单独设置服务器的端口号,如果默认的8080被占用的情况,这个配置就派的上用场啦。
  3. contentBase:定义开启服务器的文件夹,默认:当前项目根目录 一般来说不需要设置这个选项,除非你需要DevServer 来访问其他的静态文件夹。
  4. hot:该配置项是指模块替换功能,DevServer 默认行为是在发现源代码被更新后通过自动刷新整个页面来做到实时预览的,但是开启模块热替换功能后,它是通过在不刷新整个页面的情况下通过使用新模块替换旧模块来做到实时预览的。这么做的好处是,可以减少一些不必要的请求。

不使用热替换,会更新整个bundle.js文件。
在这里插入图片描述
当我们使用了之后,如果我们的文件被修改了,会新生成一个JSON文件和JS文件,而最开始的bundle.js文件并没有全部更新。
在这里插入图片描述

### 配置和使用 Webpack 的指南 #### 安装 Node.js 和 npm 为了在 Mac 上配置和使用 Webpack,首先需要确保已安装 Node.js 及其包管理器 npm。可以通过 Homebrew 或者直接下载官方安装程序来完成这一步骤。 #### 初始化项目并安装依赖项 在一个新的终端窗口中进入目标目录,并执行命令 `npm init` 来初始化一个新的 NPM 项目。之后可以按照如下方式安装必要的开发工具: ```bash npm install webpack webpack-cli --save-dev ``` 这条指令会将 Webpack 及 CLI 工具作为项目的开发依赖项保存下来[^1]。 对于希望启用热更新功能的情况,则还需要额外安装 `webpack-dev-server`: ```bash npm install webpack-dev-server --save-dev ``` 此操作同样将其标记为仅限于开发阶段使用的软件包[^2]。 #### 创建基本的 Webpack 配置文件 接下来,在根目录下创建名为 `webpack.config.js` 的 JavaScript 文件用于定义构建过程中的各项参数。例如: ```javascript const path = require('path'); module.exports = { entry: './src/index.js', // 输入源码路径 output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, mode: process.env.NODE_ENV || 'development' }; ``` 需要注意的是,尽管在此处设定了模式选项 (`mode`) ,但在实际编译过程中该属性的实际值取决于环境变量 `NODE_ENV` 。如果未指定,默认采用 `'development'` 模式[^3]。 #### 编写 CSS/LESS 并集成 PostCSS 处理流程 当涉及到样式表资源时,除了常规加载外还可以利用像 LESS 这样的预处理器以及 PostCSS 提供的功能增强版 CSS 支持。具体做法包括但不限于引入相应的 loader 插件和支持库: ```bash npm install css-loader style-loader less less-loader postcss-preset-env -D ``` 上述命令不仅涵盖了处理标准 CSS 所需的基础组件,还加入了对 LESS 解析的支持以及现代 CSS 特性的兼容层——PostCSS preset env[^4]。 最后别忘了调整 Webpack 设置以适应这些新增加的内容;通常这意味着向模块规则列表里追加几条记录以便正确解析不同类型的静态资产。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值