webpack 的使用

在导入新的工程的时候,发现通过npm run dev 的时候第一次是localhost:8080,然后是localhost:8081,这样不停的占用端口,后来发现 我们的打包webpack.config.dev.js 中没有对server 端口进行指定,解决办法是

 devServer: {
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 3001
  },

通过这种方式来指定端口,问题解决

后面待续

参考资料:

1  http://webpack.html.cn/guides/development.html

### 如何使用 Webpack 进行模块打包 Webpack 是一种强大的前端构建工具,能够实现模块化管理和资源优化。以下是关于如何使用 Webpack 完成模块化的打包过程。 #### 初始化项目并安装依赖 为了开始使用 Webpack,首先需要创建一个新的 Node.js 项目,并初始化 `package.json` 文件来管理项目的依赖项。这可以通过运行以下命令完成: ```bash npm init --yes ``` 随后,安装 Webpack 及其 CLI 工具作为开发依赖: ```bash npm i webpack webpack-cli --save-dev ``` 以上步骤确保了项目具备必要的基础配置和工具链[^1][^2]。 #### 配置 Webpack Webpack 的工作流程通常基于一个名为 `webpack.config.js` 的文件。该文件定义了入口、出口以及其他选项。下面是一个简单的配置示例: ```javascript const path = require('path'); module.exports = { entry: './src/index.js', // 入口文件路径 output: { filename: 'bundle.js', // 输出文件名 path: path.resolve(__dirname, 'dist') // 输出目录 }, mode: 'development' // 构建模式:可选 development 或 production }; ``` 此配置指定了应用的入口点 (`entry`) 和最终打包后的输出位置 (`output`)。此外还设置了构建模式为开发环境(`mode: 'development'`),以便调试更容易[^3]。 #### 执行打包 当一切准备就绪后,可以在终端中执行以下命令来进行实际的打包操作: ```bash npx webpack ``` 这条指令会读取当前目录下的默认配置文件 `webpack.config.js` 并按照其中设定的方式处理源码,最后生成目标文件到指定的位置[^4]。 #### 性能优化与高级功能 除了基本的功能外,Webpack 提供了许多额外特性用于提升性能和增强灵活性,比如代码分割(Code Splitting),动态加载(Dynamic Imports)等策略可以帮助进一步改善用户体验。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值