webpack打包配置(__dirname, extensions, alias)

最新推荐文章于 2024-07-18 15:37:28 发布

yotomato

最新推荐文章于 2024-07-18 15:37:28 发布

阅读量2.1k

点赞数 1

分类专栏：前端学习记录文章标签： javascript 前端 vue.js webpack

本文链接：https://blog.csdn.net/yotomato/article/details/123984821

版权

本文介绍了webpack中使用__dirname的含义，解释了path.resolve如何创建打包后的build目录，以及如何通过配置filename指定输出文件名。此外，还详细讲解了resolve.extensions简化文件导入和alias设置别名来便捷引用路径的方法。

摘要由CSDN通过智能技术生成

"__dirname"是node中的一个全局变量，它指向当前执行脚本所在的目录。
"path.resolve"相当于在当前文件夹后面拼接了一个文件路径，也就是打包时，会在当前项目中生成一个名为build的文件目录，用来存放打包内容。
“filename"为打包后的文件名称。
配置resolve中的extensions，可以忽略文件引入后缀
配置resolve中的alias，可以使用简单字符代替文件引入的相对路径”…/"之类

// 封装函数使用resolve更方便
function resolve (dir) {
   
  return path.join(__dirname, '..', dir

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yotomato

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack打包配置(__dirname, extensions, alias)

“_dirname”的意思忽略引入文件的后缀使用简单字符代替路径目录../
复制链接

扫一扫

专栏目录

webpack

uciiiii的博客

06-10

395

webpack 1.安装webpack指定的版本（之前安装好nodejs，-g全局） npm install webpack@3.6.0 -g 2.webpack查看安装成功 webpack-dev-server开发服务器它的功能可以实现热加载并且自动刷新浏览器 1.打开程序目录 cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 ht...

webpack打包后，__dirname获取不到所在路径

huzhenv5的博客

01-10

3568

在用webpack打包node的后台工程后，会出现通过__dirname获取不到文件所i在路径或者为空字符串的情况，这时候只需要在webpack配置文件webpack.confg.js中将node字段设置成如下即可： module.exports = { node: { __dirname: false } } 为什么要这么设置呢，可以查看webpack官网关于配置文件...

参与评论您还未登录，请先登录后发表或查看评论

webpack配置自定义文件打包名称

最新发布

小陈的收藏

07-18

125

[hash] 指的是匹配文件的名字 [hash:10] 指的是问得名字长度为10 [ext] 也就代表字符 '.' [query] 路径后面的参数 //给图片设置导出的文件夹及名字 rules:[{ test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource' , generator:{ filename: 'images/[hash:8][ext][111]'} } ..

【Webpack】打包资源的名称路径和清空打包资源

小秀的博客

02-17

1004

（注意：需要将上次打包生成的文件清空，再重新打包才有效果）观察 dist 目录资源情况。

webpack配置之Extensions

Mountains_river的博客

07-30

1444

ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/vue/App.vue Module not found: Error: Can’t resolve ‘./Cpn’ in ‘*****’ 大家在初学webpack时都会遇到这样的问题这种报错是因为在文件中引入时例如 import Cpn from "./Cpn.vue"; requ

webpack打包中path.resolve和__dirname的含义

时清云的博客

06-03

6465

在webpack打包中，我们经常会有这样的配置， const path = require('path'); module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), // 对这一行代码有疑问 filename: 'my-first-webpack.bundle.js' } }; 那么我们来看一下path.resolve和__

webpack里面__dirname意思

ahua2800的博客

04-23

2011

转载于:https://www.cnblogs.com/shiyunfront/p/8922207.html

webpack中配置文件扩展名(extensions)和别名(alias)

shangsiqi1的博客

11-29

4314

当在入口文件中引入一些文件时,默认js,json不用写扩展名,但是当引入例如jsx文件时默认是不可以不写后缀名的,如果不想写后缀名可以在wepack.config.js文件中进行配置 resolve:{ extensions:['.js','.jsx','.json'], //表示在import 文件时文件后缀名可以不写 alias:{ '@':path.join(__dirname,'....

webpack_basic_template

03-15

Webpack 基本模板是为构建静态网站提供的一种基础配置，它主要针对JavaScript应用，旨在简化前端资源管理和打包过程。Webpack 是一个模块打包工具，它能够将JavaScript、CSS、图片等不同类型的文件作为模块处理，并...

webpack打包常用配置项

09-05

本文将深入探讨 Webpack 的常用配置项，帮助你更好地理解和优化你的项目打包过程。 ### 1. `entry` `entry` 配置指定了项目的入口起点，Webpack 会从这里开始构建模块依赖图。它可以是一个字符串、对象或数组，用于...

webpack打包配置

GoodLuck_wu5的博客

06-02

2330

webpack打包配置的步骤

webpack 打包全流程

harvestUachieve的博客

08-20

4240

只有在脚本使用时才会调用。ES6渐渐取代CommonJs。

webpack中resolve.extensions 说明

engineer_why的博客

05-22

931

使用webpack，当导入语句时，webpack 会先去寻找.js文件，如果该文件不存在就去寻找.json文件，如果还是找不到就报错。esolve.extensions是用在配置在使用过程中使用到的后缀列表，① 后缀尝试列表要尽可能的小，不要把项目中不可能存在的情况写到后缀尝试列表中。② 频率出现最高的文件后缀要优先放在最前面，以做到尽快的退出寻找过程。③ 在源码中写导入语句时，要尽可能的带上后缀，从而可以避免寻找过程。默认是：extensions: [‘.js’, ‘.json’]

webpack中的path.resolve(__dirname, “dist“)

cathy_39的博客

01-30

1327

webpack中的path.resolve(__dirname, "dist")

webpack打包中path.resolve(__dirname,“dist“)的含义

团酱

11-25

3574

webpack打包中path.resolve(__dirname,"dist")的含义

【webpack】---模块打包机webpack基础使用---【巷子】

weixin_30680385的博客

03-21

001、什么是webpack? 作用有哪些？WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的...

webpack优化构建速度示例-resolve.extensions:

qq_36413371的博客

05-15

260

当项目不仅仅包含.js或.json文件，还包含其他类型文件(如.ts、.vue、.css)作为模块时，配置resolve.extensions可以不必要的文件搜索提高性能。可以看到优化resolve.extensions的顺序，简单的三个小模块的打包就带来了1508-1467=41ms的性能提升。

webpack打包vue项目

09-03

Webpack是一个模块打包器，可以将多个模块打包成一个或多个bundle。下面是使用Webpack打包Vue项目的一般步骤： 1. 安装Webpack和相关依赖： ``` npm install webpack webpack-cli vue-loader vue-template-compiler css-loader style-loader ``` 2. 创建一个Webpack配置文件（例如webpack.config.js）： ```javascript const path = require('path'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] } }; ``` 3. 创建一个入口文件（例如src/main.js）： ```javascript import Vue from 'vue'; import App from './App.vue'; new Vue({ render: h => h(App) }).$mount('#app'); ``` 4. 创建Vue组件文件（例如src/App.vue）： ```vue <template> <div> <h1>{{ message }}</h1> </div> </template> <script> export default { data() { return { message: 'Hello, Vue!' }; } }; </script> ``` 5. 执行Webpack打包命令： ``` npx webpack ``` 6. 打包完成后，在dist目录下会生成bundle.js文件，将该文件引入到HTML中即可。以上是一个基本的Webpack配置用于打包Vue项目，你可以根据自己的需求进行更多的配置和优化。