webpack 入口与输出

本文详细介绍了如何在Webpack配置文件中引入Node.js的path模块,并利用该模块进行路径拼接以实现正确的文件引用。通过具体示例展示了如何设置入口文件(entry)和输出文件(output)的路径。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

配置文件webpack.config.js中

引入node的path模块

const path = require('path')

const config = {
    entry:'./src/index.js',
    output: {
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    }
}
module.exports = config

入口 entry

输出output中的path需要使用绝对路径,

path.join拼接路径,Nodejs全局变量__dirname

------------------------------------------------------------

参考node中文文档path和global

http://nodejs.cn/api/path.html

 

### 配置 Webpack入口文件路径 Webpack 允许通过 `entry` 属性来配置入口文件路径,该配置可以是单入口,也可以是多入口,具体取决于项目需求。 #### 单入口配置 单入口适用于简单的项目结构,通常用于打包一个单独的 JavaScript 文件。在 `webpack.config.js` 中,可以如下配置: ```javascript module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }; ``` 该配置表示 Webpack 从 `./src/index.js` 开始打包,并将输出文件命名为 `bundle.js`,存放于 `dist` 目录中[^4]。 #### 多入口配置 对于复杂项目,如需要打包多个独立的入口文件,可以使用多入口配置。例如: ```javascript module.exports = { entry: { main: './src/index.js', another: './src/another.js' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } }; ``` 上述配置中,`main` 和 `another` 是两个入口点,Webpack 会分别打包为 `main.bundle.js` 和 `another.bundle.js`。`[name]` 是一个占位符,表示入口点的名称[^2]。 #### 动态添加入口文件 如果项目包含多个页面,且每个页面都有独立的 HTML 文件,可以通过动态方式添加入口文件和 HTML 插件。例如: ```javascript const getEntry = () => { return ['page1', 'page2']; // 假设有两个页面 }; const webpackconfig = { entry: {}, plugins: [] }; getEntry().forEach(pathname => { webpackconfig.entry[pathname] = `./src/${pathname}/index.js`; const conf = { filename: path.join(pathname, pathname) + '.html', template: path.join(__dirname, 'src', pathname, 'html', 'index.html') }; webpackconfig.plugins.push(new HtmlWebpackPlugin(conf)); }); module.exports = webpackconfig; ``` 此配置通过 `getEntry()` 函数动态获取入口文件名称,并为每个入口点生成对应的 HTML 文件[^5]。 #### 使用别名简化路径 为了避免在代码中使用冗长的相对路径,可以通过 `resolve.alias` 来配置路径别名。例如: ```javascript module.exports = { resolve: { alias: { '@': path.resolve(__dirname, 'src/') } } }; ``` 在代码中,可以使用 `@/index.js` 来代替 `./src/index.js`,从而提升代码的可读性和可维护性[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值