首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

升级到webpack 5后,如何阻止Webpack创建dist/main.js?

升级到Webpack 5后,可以通过配置文件的方式来阻止Webpack创建dist/main.js文件。具体步骤如下:

  1. 在项目根目录下找到webpack.config.js文件(如果没有则新建一个)。
  2. 打开webpack.config.js文件,添加以下配置:
代码语言:txt
复制
const path = require('path');

module.exports = {
  // 入口文件配置
  entry: {
    main: './src/index.js',
  },
  // 输出文件配置
  output: {
    // 输出路径
    path: path.resolve(__dirname, 'dist'),
    // 输出文件名
    filename: '[name].js',
    // 设置为false,阻止Webpack创建dist/main.js文件
    // 设置为空字符串也可以达到相同效果
    // 设置为其他值则会创建对应的文件
    assetModuleFilename: false,
  },
  // 其他配置项...
};

在上述配置中,我们通过设置assetModuleFilenamefalse来阻止Webpack创建dist/main.js文件。这是因为Webpack 5引入了新的资源模块(asset module)的概念,它可以处理各种类型的资源文件,包括图片、字体等。默认情况下,Webpack会将这些资源文件输出到dist目录下,并且使用文件的哈希值作为文件名。但是,我们可以通过配置assetModuleFilename来控制资源文件的输出方式。

注意:以上配置仅适用于Webpack 5及以上版本,如果使用的是Webpack 4或更早版本,则需要使用其他方式来阻止Webpack创建dist/main.js文件。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)。

腾讯云云服务器(CVM):提供弹性计算能力,可快速部署和扩展应用程序。详情请参考腾讯云云服务器产品介绍

腾讯云对象存储(COS):提供安全、稳定、低成本的云端存储服务,可用于存储和分发各种类型的文件。详情请参考腾讯云对象存储产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端(以Vue为例)webpack打包dist文件包如何部署到django后台中

由于现在前端使用的三大框架配合webpack可以实现快速打包,为部署到服务端提供了非常大的便利,那么在前端打包,应该做些什么可以部署到django的后台中呢?...1.打包后文件包dist 进入到 dist文件包会发现是这个样子的: 2.在django项目中创建前端文件包(静态资源包,我习惯起名为frontend)         然后把dist文件包中的static...做完这些吧static这个空文件包删掉就行了。这样就形成了django后台的静态文件包。...= os.path.join(BASE_DIR, 'static') STATICFILES_DIRS = [ os.path.join(BASE_DIR, "frontend"), ] 4.创建一个...$',views.index,name="index")设置,启动django,访问8000端口就可以加载到前端的路由了 或者,直接在url中加入: from django.views.generic

3.1K20

Webpack前世今生

2.2打包 打包如何理解呢?理解了webpack可以帮助我们进行模块化,并且处理模块间的各种复杂关系,打包的概念就非常好理解了。...当在package.json中定义了scripts时,其中包含了webpack命令,那么使用的是局部webpack 5.webpack起步 5.1创建文件 我们创建如下文件和文件夹: ?...(如何处理的,待会儿在原理中,我会讲解)另外,如果在处理完所有模块之间的关系,将多个js打包到一个js文件中,引入时就变得非常方便了。那么该如何打包呢? 我们可以在终端使用 webpack ....\src\main.js -o .\dist\bundle.js 进行打包,如果自己的webpack版本较低,可以使用webpack .\src\main.js ....第一步,项目中需要安装自己局部的webpack。这里我们让局部安装webpack3.6.0,Vue CLI3中已经升级到webpack4,但是它将配置文件隐藏了起来,所以查看起来不是很方便。

88430

webpack工程化及其配置指北(1)

早年刚入行我曾经自己在项目里配过webpack,上午面向百度配置的内容,下午就重复不出来了。后来查了一个下午,才去看package.json,发现下午webpack从我上午用的2.x升级到4.x了。...如果你面向百度百度编程,webpack部分是一定要带版本号的。 我也问过很多前端,你的项目是怎么创建的。他们都会理所当然地说:vue-cli啊!"webpack呢?"不了解。我的天呐。...这时项目多出了一个src文件,里面的main.js就是打包的代码。0配置情况下webpack会自动找寻src下的index代码。...优化你的项目 一般来说,可以遵循一下习惯: dist //打包的资源⽬目录 node_modules //第三⽅方模块 src //源代码 css images index.js package.json...webpack是模块打包⼯工具,⽽而模块不不仅仅是js,还可以是css,图⽚片或者其他格式 但是webpack默认只知道如何处理js模块,那么其他格式的模块处理,就需要loader了.

57410

webpack入门教程(一)

更新日志 下面就全局安装webpack,运行: npm install -g webpack --第二步,创建配置项: 安装完Node.js,新建一个项目目录,进入目录,执行: npm init 按提示输入项目的名称.../dist/main.js'> 总结一下,目前项目的文件目录是: 图片1.png 在命令行中执行: webpack 项目入口文件的地址 这里是执行...如果看到这个,恭喜你打包成功: 图片2.png 打包成功,就会在项目目录下多出一个dist文件夹,里面有个main.js,index.html中,引入的就是这个打包webpack文件地址.../dist/bundle.js'> 把原来打包dist/main.js删掉,命令行执行: webpack 可以看到打包成功,在项目的dist...,在项目的dist文件中出现bundle.js: 图片5.png 浏览器打开index.html,发现正常显示。

21.2K2167

Vue 3 和 Webpack 5 来了,手动搭建的知识该更新了

配置 Webpack 环境 我们先抛开 Vue ,针对 Webpack 先搭建一个项目最初的模样,在你喜欢的目录下新建一个文件夹,并初始化项目: // 创建文件夹 mkdir hand-vue3-project.../src/main.js'), // 打包入口 output: { path: path.resolve(__dirname, 'dist'), // 打包出口 filename:...image.png 图中的 js/main.js 就是我们通过 webpackmain.js 打包完的代码,打开之后你会发现里面啥都没有,接下来我们给 index.html 添加内容,然后通过...image.png 还有一个小插件是必备的, clean-webpack-plugin ,它的作用就是每次打包的时候,都会把 dist 目录清空,防止文件变动,还有残留一些老的文件,以及避免一些缓存问题.../webpack.config.js" } 注意了啊,webpack-cli 升级到 4.x 的时候,就不能用 webpack-dev-server 跑脚本了,而是改为 webpack serve 去跑

1.9K31

Webpack 4正式发布!从0配置到生产模式,你需要知道的都在这里了

但是从webpack 4开始,不需要定义入口点:它会将./src/index.js作为默认值! 测试新特性非常简单,创建文件..../dist/main.js中获得该软件包。...所以这是第一条:webpack 4不需要配置文件。 它会查找./src/index.js作为默认入口点。 而且,它会在./dist/main.js中吐出这个包。.../dist/main.js。 你看到了什么? 是的,我知道,一个无聊的包…没有缩小! 现在尝试运行: npm run build 并看看./dist/main.js。 你现在看到什么?...关于webpack更多的特性: sideEffects 设置 —— 在打包体积上巨大的胜利 支持 JSON 和 Tree Shaking 升级到 UglifyJS2 模块类型的引入 + 支持 .mjs

84020

使用 Vue 脚手架,为什么要学 webpack

所以我们先介绍 webpack如何管理项目的,如何把项目中 js、css、html等是如何压缩转换文件?然后学习 vue-cli 2、vue-cli 3 分别如何创建项目,以及项目结构介绍。...2.3、新建项目内容 dist -- distribution(发布) 创建 dist 文件夹,用于存储打包之后的文件。...创建 src 文件夹,文件夹内新建 index.js 作为入口;创建index.html文件,并创建main.js文件并引入html。.../src/main.js', output:{ path:path.resolve(__dirname,'dist'), filename:'bundle.js' } } 重新运行命令:webpack...此时就会在dist文件夹内出现了一个被打包的 bundle.js。 三、webpack 用来做什么? 以上内容讲述的打包,只是打包了js内容,具体的index.html并没有被打包到dist文件内。

91220

Webpack5 快速入门

1. webpack 介绍 2. webpack 基本使用 3. webpack 5大核心概念 4. webpack 配置文件 5. webpack 运行脚本 6. webpack 处理样式资源 一、处理.../dist/main.js"> 初始化 npm 项目,安装 webpack 依赖,进行打包 npm init -ynpm i webpack webpack-cli -Dnpx webpack.../src/main.js --mode=development 3. webpack 5大核心概念 ---- Webpack 的配置是围绕 5 大核心概念展开的,这五个概念非常重要 一、entry (入口...) 指示 Webpack 从哪个文件开始打包 二、output (输出) 指示 Webpack 打包完的文件输出到哪里去,以及如何命名等 三、loader (加载器) webpack 本身只能处理 js...        path: path.resolve(__dirname, 'dist'), // 绝对路径        // 文件名        filename: "main.js",    }

50410

【学习笔记】尚硅谷Webpack5入门到原理 | 基础篇

WebPack5入门到原理⛄最近报名了字节跳动的前端青训营,大作业是要做一个组件库项目。⛄当我自信的打开IDE准备大展身手的时候发现一点思路都没有,网上搜罗了很多教程发现自己对工程化的知识了解尚浅。...⭐注:本文是对尚硅谷 Web 前端之 Webpack5 教程的学习笔记记录,加入了一些自己的练习改动与思考。.../src/main.js --mode=development生产模式# 此状态下打包会将ES6全部转为ES5 并且压缩代码npx webpack ....(我们需要其他的Webpack工具来帮忙处理)基本配置五大核心概念entry(入口)指示 Webpack 从哪个文件开始打包output(输出)指示 Webpack 打包完的文件输出到哪里去,如何命名等...处理样式资源学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源介绍Webpack 本身是不能识别样式资源的,所以我们需要借助 Loader 来帮助 Webpack

2.2K00

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)

本文源代码:https://github.com/kenkozheng/HTML5_research/tree/master/Vue-Multipages-Webpack3 本文目录,也是实现纯前端多页面的步骤...先创建项目目录,然后在目录内运行vue init webpack-simple,一路yes下去 然后,我们会得到这样的目录结构: ! ?...path指的是打包输出的文件目录 publicPath指的是path中生成的文件,对应的外网访问地址,需要根据最终发布后项目实际如何部署来填写,开发和生产两个环境可能不一样路径。...3 多页面改造 了解了原型项目的功能,接下来需要做的事情包括: 建立多页面项目目录,创建多个vue webpack多entry配置 复用html/自动生成html 实际项目的一些优化 >创建多页面 如图所示...'/' : '/dist/', //发布在线访问的url。

1.3K20

掌握webpack(一)一张图让你明白webpack中output的filename、path、publicPath与主流插件的关系

的构建过程: yarn build 运行以后,就会在项目根目录下的dist目录下生成main.js。...', entry: { @@ -7,5 +8,10 @@ module.exports = { output: { filename: 'main.js',...}) + ] } 让我们再次运行构建脚本,我们会发现,dist目录中,不仅仅生成了main.js,还生成一个index.html: 通过检查这个index.html的内容可以看到,这个插件不仅仅帮我们生成了一个...html,还在这个html中的head节点中创建了一个script节点,并且src属性填写的是main.js。...}, 重新经过构建以后,我们会看到my-dist目录被创建,并且这个目录下面还会创建js目录,js目录中会有main.js,正好匹配了output.path(项目根目录/my-dist) + output.filename

56150

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券