哎呀，webpack到底如何配置呢？ 一起看看

于 2022-08-08 11:27:13 发布
阅读量169 收藏
点赞数
分类专栏： vue 前端 文章标签： webpack 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/monk96/article/details/126223907
版权
前端 同时被 2 个专栏收录
44 篇文章 0 订阅
订阅专栏
vue
10 篇文章 0 订阅
订阅专栏

文章目录


webpack是工程化的流行工具，可以用來打包各種項目，這篇文章主要講解webpack的配置。

模块

webpack的配置有六大模块

  • mode： 配置项目的开发模式 （开发和发布模式）
  • entry： （配置入口文件，可配置多个入口文件，是个对象）单个入口是字符串
  • output： 产出文件path， filename： 输出名字
  • module：解析器loader配置，常用的vue-loader， css-loader，ts-loader
  • plugins：压缩插件，热更插件
  • resolve：常用的项目配置,如alias， extensions
东哥爱编程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webpack超详细配置, 使用教程(图文)
翾的博客
05-06 10万+
博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目.流程webpack安装 Step 1: 首先安装Node.js, 可以去Node.js官网下载. Step2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中npm install
如何配置webpack（学习总结）
github_39673115的博客
10-26 2154
什么是webpackWebPack可以看做是模块打包机：它可以分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。webpack与Grunt和Gulp的区别webpack与Grunt和Gulp不同，它本身并不是一个打包工具，但它具有可以替代它们的优势。Grunt和Gulp的工作模式：在
webpack-第一集
come from h5
09-20 371
初识webpack 文档 官网网站：https://webpack.js.org/ 1.webpack简介 webpack是一个打包模块化JavaScript的工具，它会从入口模块出发，识别出源码中的模块化导入语句，递归地找出入口文件的所有依赖，将入口和其所有的依赖打包到一个单独的文件中。 是工程化、自动化思想在前端开发中的体现 2、安装webpack 2.1 - 环境准备 nodeJs https://nodejs.org/en/ 版本参考官网发布的最新版本，可以提高webpack的打包速度 2.2
webpack基本配置
03-08
Webpack 的核心概念是基于模块化的思想，通过配置文件（webpack.config.js）来定制打包流程。 在“webpack基本配置”中，我们通常会涉及以下几个关键部分： 1. **入口(entry)**：定义应用程序的起点，Webpack 从这...
webpack5配置之vue3
最新发布
12-14
基于webpack5构建的vue3项目，可用来学习webpack5的常用配置，和常见优化。https://webpack.docschina.org/plugins/image-minimizer-webpack-plugin/#root。 基于webpack5构建的vue3项目，可用来学习webpack5的常用...
webpack配置文件和常用配置项介绍
01-02
1、安装webpack 1.全局安装webpack：npm install webpack -g 或者转化了...1.webpack需要配置文件webpack.config.js，手动的创建于项目根目录中就ok。一个项目可以设置多个配置文件，每个都可以有不同的功能。 2.webpa
webpack高级配置与优化详解
10-15
主要介绍了webpack高级配置与优化,其中包括了webpack打包多页面，webpack跨域问题等相关内容
记录uni-app的时间选择器
热门推荐
monk96的博客
02-25 1万+
由于开发过程中需要用到时间选择器，所以写了一个小插件。 先来看官方的文档： 官方文档 官方功能不完善，所以稍微改动一下； <template> <view> <picker :title="index" @change="bindTimeChange" @columnchange="columnchange" mode="multiSelector" :dis......
随机生成19位的随机数
monk96的博客
08-04 4916
这里是引用 <!DOCTYPE html> <html> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&g...
记录下hbuilderX+vue开发app 真机调试的问题
monk96的博客
04-04 4352
原由 找了半天官方的文档也没找到几个靠谱的文档，最后还是慢慢摸索出来的 解决： hbuilderx连接手机调试 一.找到hbuilderx的安装目录并找到plugins 二.找到launcher 三.找到tools目录 四.找到adbs并复制地址 五.添加到系统变量path window+R 输入：set path = %path%;D:\soft\HBuilderX\plugi......
浏览器创建下载任务
monk96的博客
03-17 2656
在开发一个项目的时候，点击下载按钮后要下载文件到本地，但百度了半天也没有找到，最后终于研究到了，下面贡献给大家 const blob = new Blob([res.data],{type: 'application/octet-stream'}); const url = window.URL.createObjectURL(blob); con...
uni-app引入阿里图标
monk96的博客
11-04 2322
今天刚好用uni-app在开发一个多端应用，在开始引用图标时不知道如何引入多端应用的图标，后来用阿里图标解决了，在此记录下解决的方法 去阿里图标官网下载阿里图标，选择unicode 2.复制代码，在app.vue粘贴，注意：将链接都加上https 3.在main.js中引入下载的字体文件，一般放在static下 4.在页面中引用 大功告成 ...
vue 使用bootstrap4的toast功能
monk96的博客
03-21 1578
原文档实在是太难看了，研究了半天才看出来。 简单来说就两点 一.引入弹窗内容 <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false"> <div class="toast-header"> <img src="..." cl...
uniapp开发高校选择器
monk96的博客
02-28 1304
在开发过程中遇到选择器问题，没有找到较好的插件，于是自己写了一个； 效果如下 学校的数据 可到我的资源中心下载 代码和文件截图如下：
用jquery实现微博的发布和删除功能！！！
monk96的博客
09-08 904
用html5+css+jquery实现微博的发布和删除功能，目前只实现了单机的功能！ 下面是html5的内容： 首页 发表 ...
forEach对async没有作用
monk96的博客
03-21 816
原因：forEach 只支持同步，不支持异步 解决办法： 用for of循环 (async()=>{ let index = 0 ; for(let val of this.files){ formData = new FormData(); formData.append("im...
DWZ弹窗用法总结
monk96的博客
03-10 694
一、提示窗口 alertMsg.confirm('确定打开吗?',{ onCall:function(){ $.ajaxSettings.global = false; $.ajax({ type:"GET", url:"${basePath}grow/cream/deleteExp.do?expId=expId", contentType:"application/json; charset=utf-8", dataType:"json",
webpack 怎么配置？
08-30
Webpack 的配置可以通过一个名为 webpack.config.js 的文件来进行，该文件是一个 JavaScript 模块，用于指定如何打包和处理项目中的各种资源。 下面是一个简单的 webpack.config.js 配置的示例： ```javascript const path = require('path'); module.exports = { // 入口文件 entry: './src/index.js', // 输出文件 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, // 模块处理规则 module: { rules: [ { // 使用 babel-loader 处理 js 文件 test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, }, { // 使用 style-loader 和 css-loader 处理 css 文件 test: /\.css$/, use: ['style-loader', 'css-loader'], }, // 添加其他需要的 loader 配置，如处理图片、字体等 ], }, // 插件配置 plugins: [ // 添加需要使用的插件 ], }; ``` 上述示例中，配置了入口文件为 `src/index.js`，输出文件为 `dist/bundle.js`。同时，还配置了两个处理规则：使用 `babel-loader` 处理 js 文件，使用 `style-loader` 和 `css-loader` 处理 css 文件。 当然，这只是一个基本的配置示例，你可以根据你的项目需求添加其他需要的 loader 和插件，并进行更详细的配置。Webpack 提供了丰富的插件和 loader 可供选择，可以根据具体的需求进行配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东哥爱编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值