webpack 打包后与index.html同级文件的配置

最新推荐文章于 2024-08-01 09:33:08 发布
最新推荐文章于 2024-08-01 09:33:08 发布
阅读量3k 收藏 2
点赞数 1
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A_one2010/article/details/84787776
版权

通常我们使用webpack-cli 进行项目打包，会打包一个文件夹，然后包含页面与资源，如下图

static 文件夹包含了css,js,静态资源文件等等。

此时我们想打包后将某个文件与index.html并级，该如何配置。

找到项目的webpack配置项，build文件夹，webpack.dev.config.js  ，找到CopyWebpackPlugin，添加对应的资源文件，

A_one2010
关注
专栏目录
vue项目 npm run build 打包静态项目问题，一步到位的操作
Jacy_Lee_LDF的博客
08-14 2322
这次是第一次做vue项目，什么都不懂，过程中也遇到很多问题，每一次解决了就习惯性的写篇文章记录下来，以免下次再遇到，这次项目终于写完了，要打包上线，发现直接npm run build 打包之后，index.html 页面打开空白，检查发现引用的文件都报错了，百度方法，不报错了，但是index依然空白，还有项目打包时报错的问题，经过几十个标签页的学习，我觉得干脆改打包之前该修改的内容已经该添加的内容都操作一遍好了，省心！以下是具体操作： 1.首先修改 config/index.js ： productio.
安装Webpack/配置webpack.config.js
weixin_44884546的博客
08-02 570
Webpack 一、市面上有哪些类似于Webpack的前端工程化工具【 自动化工具 】 grunt gulp ( 4.x ) Browserify ( Webpack 前身 ) Webpack 【 主流行 】 rollup.js https://www.rollupjs.com/guide/zh 【 小众 】 parcel 【 小众 】 FIS https://fis.baidu.com/...
vue-cli2设置将某个文件/文件夹打包到index.html同级目录下
LiumxCSDN的博客
09-26 415
2.在build/webpack.base.conf.js文件下使用插件,例如将目录doc打包到dist下与index.html同级目录下。3.打包前将doc目录放在与static同级目录下，执行打包命令，就可以将doc打包到dist并且与index.html目录下了。1.安装插件copy-webpack-plugin。
vue2:vue.config.js 多页面打包（pages）注意点
最新发布
m0_61177365的博客
08-01 245
对比下就知道了，多页面配置下，html插件的实例名称会和页面名称结合变成html-index、html-subpage这种形式，preload插件也是如此。当在 multi-page 模式下构建时，webpack 配置会包含不一样的插件 (这时会存在多个 html-webpack-plugin。——如果你配置了单独内嵌vue 的runtime，这个也一定要写到chunks里面，不然页面也是白屏或者其他问题。——那么pages 的hunks数组里的值要和配置splitChunks里面的name的值对应。
vue-cli通过webpack把.txt文件打包到dist文件夹下并且和index.html在同一级目录
西风XF的博客
08-21 4752
使用CopyWebpackPlugin插件，在webpack中copy文件或文件夹 1、下载插件CopyWebpackPlugin $ npm install copy-webpack-plugin --save-dev 2、在build/webpack.base.conf.js文件下使用插件： const CopyWebpackPlugin = require('copy-webpa...
vue-cli项目打包多个与static文件同级的静态资源目录（copy-webpack-plugin插件的使用）...
weixin_33670786的博客
12-14 593
场景 业务要求能够直接通过 “域名+/file”的方式访问静态资源的html，然而产品绝对static暴露在url中不好看又不能直接将html放在static中。所以想到了既然static可以直接访问，那么给他新加几个文件目录应该不是问题。 重点 在webpack.dev.conf.js和webpack.prod.conf.js两个文件中，都有这样一段配置代码： // copy custom st...
使用 vue/cli 打包之后的dist-index.html访问问题
Xpy 的博客
04-20 481
希望打完包之后直接点index文件就可以预览。 效果图： 解决办法 一、在根目录创建vue.config.js 二、为了防止路由跳转出问题，路由配置也需要改成哈希路由。
vue在index.html中引入静态文件不生效问题及解决方法
10-17
因此，当我们在`index.html`中尝试引入`src`文件夹内的静态文件时，这些文件不会被处理并打包到最终的输出目录中，导致浏览器无法正确加载。 **解决办法：** 将静态文件移动到`static`目录下。`static`是Vue CLI...
webpack打包优化和打包上线
LiuBo_1999的博客
06-04 433
图片优化 使用 url-loader 优化， 将小图片转化成base64压缩,防止小图片太多请求次数太多。 下载 url-loader npm install -D url-loader 配置 在 webpack.prod.conf.js 文件夹中配置 module: { rules: [{ test: /\.(png|svg|jpg|gif)$/, use: [{ loader: 'url-loader', // 优化小图片
【webpack】使用webpack打包图片文件、打包时生成单独的css文件
wusq的博客
10-03 1553
使用webpack打包图片文件 在scr目录下创建image文件夹，并且添加几张图片 在main.js使用import方式引入所有图片，并且append到app节点下 // 引入图片资源 import i1 from './image/image1.png' import i2 from './image/image2.png' // 创建图片对象 let img1 = document.createElement('img') img1.src = i1 let img2 = document.cr
webpack(一) 安装,打包和打包配置
x94410891的博客
06-08 434
webpack 一.介绍 webpack是一个模块打包工具，通过依赖处理模块，并生成那些模块静态资源。它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qdc5eVDC-1623141971720)(C:\Users\dell\AppData\Roaming\Typora\typora-user-imag
Vue 打包静态文件路径设置
热门推荐
果果的博客
10-18 1万+
1、js，css的路径不对  方法：找到 config/index.js，将其中的assetsPublicPath值改为’./’ assetsPublicPath:'./' 2、css中引用的图片资源找不到  方法：找到 build/utils.js，增加一行代码即可： publicPath:"../../" 3、config下的index配置 以上是将文件打包在dist下的guogu...
html5更改项目路径,Vue项目中index.html中的相对路径，打包后未变成绝对路径如何修改...
weixin_35750483的博客
06-16 667
在webpack.base.conf.js中resolve:{extensions:['.js','.vue','.json'],alias:{'vue$':'vue/dist/vue.esm.js','@':resolve('src'),'static':path.resolve(__dirname,'../static')//添加这...
【vue 引用public中的js文件】public文件的引用
weixin_41747256的博客
01-24 3530
一些配置项文件如果想在项目打包后进行快速的修改，可以把此文件放在public里面。
vue-element-admin通过webpack把.txt文件打包到dist文件夹下并且和index.html在同一级目录
HD243608836的博客
04-14 830
很多时候我们在打包。
vue在build之后生成的index.html多次重复载入样式表和js文件的问题
aithena的博客
03-14 5233
创建一个基于 webpack 模板的新项目（2019.03.14 测试） 1、进入文件目录，然后调起命令行工具，输入： #wwwroot 为自定义项目名 $ vue init webpack wwwroot 2、运行命令后，会让用户输入几个基本选项： ? Project name wwwroot // 项目名称 ? Project description a vue.js proj...
将Vue项目打包成一个HTML文件后是如此丝滑
ksws0319440的博客
09-15 8799
最近碰到一个需求，需要将Vue项目在移动端运行测试，但一般Vue项目打包后都是不止一个文件，放到移动端测试哪受得了。 先看看打包后的目录，把这个index.html发送到手机上就能独立运行整个项目 接下来看我的vue配置文件vue.config.js： const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { publi.
VUE-webpack
25氪
07-07 268
webpack基础使用 1.初始化包环境，自动下载package.json配置文件 yarn init 2.安装依赖包，vue包 yarn add webpack webpack-cli -D 3.在package.json里配置 4.根目录创建src目录，在src目录创建入口函数main.js文件 5.根目录创建配置入口出口webpack.config.js 6.填入配置项 const path = require("path") module.exports = {
webpack 静态资源文件加载（assets）
qq_37905131的博客
08-01 931
未修改output{filenametrue,},//修改后output{filename'js/dist.js',//js入口文件的输出目录修改path8][ext]'//资源目录整体修改},
webpack打包之后index.html页面暴露ip号
07-28
如果在 Webpack 打包后的 `index.html` 页面中暴露了 IP 地址，可能是因为在项目配置中使用了错误的配置或插件。为了修复这个问题，你可以尝试以下几个方法： 1. 使用 HtmlWebpackPlugin 插件：在 Webpack 配置文件中，确保你使用了 HtmlWebpackPlugin 插件，并配置了正确的选项。在 `plugins` 部分中添加以下代码： ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // ... plugins: [ new HtmlWebpackPlugin({ // 设置生成的 HTML 文件中的标题、模板和文件名等选项 }), ], // ... }; ``` 请确保正确设置了 `title`、`template` 和 `filename` 等选项，以避免暴露 IP 地址。 2. 检查 publicPath 配置：在 Webpack 配置文件中，检查 `output` 部分的 `publicPath` 配置。确保将其设置为合适的值，以避免暴露 IP 地址。例如，将其设置为 `/` 或相对路径。 ```javascript module.exports = { output: { // ... publicPath: '/', }, // ... }; ``` 3. 使用 devServer 配置：如果你正在使用 Webpack Dev Server 进行开发，确保在配置文件中正确设置了 `devServer` 部分。检查是否使用了 `public` 或 `host` 等选项，并将其设置为适当的值。 ```javascript module.exports = { // ... devServer: { // ... public: 'your-domain.com', // or // host: 'your-domain.com', // ... }, // ... }; ``` 确保将 `your-domain.com` 替换为你正确的域名或 IP 地址。 4. 检查其他配置项：检查 Webpack 配置文件中的其他可能影响 `index.html` 页面的配置项，例如 `mode`、`optimization` 等。确保这些配置项不会暴露 IP 地址。 如果尝试了以上方法后问题仍未解决，建议仔细检查你的 Webpack 配置文件和相关依赖，确保没有其他错误导致 IP 地址暴露在生成的 `index.html` 页面中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值