vue3中如何使用const webpack = require('webpack')
时间: 2023-12-25 13:06:03 浏览: 26
在 Vue 3 中,使用 webpack 不需要在代码中显式地导入 `webpack` 模块,因为 Vue CLI 4 和 Vue CLI 5 默认集成了 webpack,开发者只需要在项目中安装好 Vue CLI 后,就可以直接使用 webpack 进行打包和构建。
在 Vue CLI 创建的项目中,webpack 相关的配置信息都在 `vue.config.js` 文件中进行配置。例如,要设置输出文件夹和公共路径的配置信息,可以在 `vue.config.js` 文件中添加如下代码:
```js
module.exports = {
outputDir: 'dist', // 设置输出文件夹
publicPath: '/', // 设置公共路径
};
```
在运行 `npm run build` 命令时,Vue CLI 会自动读取 `vue.config.js` 文件中的配置信息,并将其传递给 webpack 进行打包和构建。
需要注意的是,在 Vue 3 中,不再需要在组件中使用 `require` 或 `import` 导入 webpack 相关的模块,而是可以直接在组件中使用 ES6 的模块导入语法来引入其他模块。例如:
```js
import axios from 'axios';
export default {
data() {
return {
posts: [],
};
},
mounted() {
axios.get('/api/posts').then((res) => {
this.posts = res.data;
});
},
};
```
这里的 `axios` 模块就是通过 ES6 的模块导入语法引入的,而不是通过 `require` 或 `import` 导入 webpack 模块。