关于将Webpack，编译文件输出到不同的目录下

最新推荐文章于 2021-01-14 14:18:27 发布
最新推荐文章于 2021-01-14 14:18:27 发布
阅读量7.7k 收藏 3
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/intandshort/article/details/47170997
版权
在学习webpack时，由于资料太少了，网上查询到的资料都是只能将文件打包到一个指定目录下。查了一下，webpack貌似没有针对每个文件配置编译后的路径。没办法，只好自己想办法。例如我的当前目录结构为，button下的index.jsx编译为当前目录下的index.jsgrid下的index.jsx编译为当前目录下的index.js正常情况下配置文件为
摘要由CSDN通过智能技术生成

在学习webpack时，由于资料太少了，网上查询到的资料都是只能将文件打包到一个指定目录下。

查了一下，webpack貌似没有针对每个文件配置编译后的路径。

没办法，只好自己想办法。

例如我的当前目录结构为，

button下的index.jsx编译为当前目录下的index.js
grid下的index.jsx编译为当前目录下的index.js

正常情况下配置文件为

最低0.47元/天 解锁文章
intandshort
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
webpack之输出路径处理
coding...
05-05 1万+
前言：本文演示了如何通过配置webpack.config.js来优化最后build成功的dist目录。最后留了一个问题待解决正文：紧接上文《 webpack之重新认知babel-loader 》项目目录：执行 npm run build之后，查看dist下面打包结果，简直乱作一锅，我们原本src下目录结构规划的很好啊(¬_¬)！优化dist目录目标目录结构：1、安装插件clean-webpack-...
Webpack安装与使用
ALin_Think的博客
04-05 408
Webpack 一、什么是Webpack Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。 二、Webpack安装 1、全局安装 npm install -g webpack webpack-cli...
如何使用webpack打包多页面并且使 css，js，img在各自页面的目录文件夹下?
ai6319的博客
07-18 1302
遇到HTML CSS JS IMG 需要单独打包的情况了，虽然现在很多都是自动化打包了，但有些时候还是偏向于定制，就是根据自己的需求去编写，打包的方法以及配置和输出的路径。对打包过程进行干预 基于上次的单文件打包。做一下升级 最终打包出来的文件是这样的？ 运行结果我就不放了， 打包的config如下 const path = require('path') const HtmlWebp...
修改webpack的文件打包路径
努力赚大钱的博客
03-04 2081
webpack的4.x版本中默认约定： 打包的入口文件为src -> index.js 打包的输出文件为dist-> main.js 如果要修改打包的入口和出口，可以在webpack.config.js中新增如下信息： const path = require('path')//导入node.js中专门操作路径的操作 module.exports = { ...
Webpack 将多个文件输出到多个目录
shengyuhang的博客
05-04 7369
entry = { "button": "demo/button/index.jsx"), "grid": "demo/grid/index.jsx") }, output: { path: 'dist/js', filename: "[name].js", chunkFilename: "[name].js" }, plugins: [ new
使用webpack4编译并压缩ES6代码的方法示例
10-17
这将在 `dist` 目录下生成一个经过 Babel 编译和 Webpack 压缩的 `index.js` 文件，适合在不支持 ES6 的环境下运行。 总结一下，使用 Webpack 4 编译并压缩 ES6 代码的关键步骤包括：安装相关依赖、配置 Webpack、...
简单使用webpack打包文件的实现
10-16
执行完这个命令后，webpack 将根据配置生成两个文件，`index.bundle.js` 和 `ym.bundle.js`，它们位于 `dest/` 目录下。这两个文件包含了我们原始源代码的打包结果，可供浏览器直接使用。 总结来说，webpack 的基本...
netcore-sass-webpack:在Visual Studio和Webpack中编译Sass文件
05-13
您只需要稍微修改Webpack配置即可将CSS文件输出到Content目录。先决条件您将需要安装Node和NPM。 您还将需要 。用法打开命令提示符，将此仓库克隆并复制到项目中以安装JavaScript依赖项git clone ...
详解webpack的文件监听实现(热更新)
10-14
现在，当你修改源代码并保存时，Webpack会自动编译并使用HMR将更新应用到页面上，而无需刷新浏览器。 热更新的工作原理是，Webpack监测到源文件变化后，会生成一个新的模块版本并通知浏览器。浏览器收到通知后，只...
详解React项目如何修改打包地址（编译输出文件地址）
12-04
现在，当你运行`npm run build`时，你的React应用将会被打包到`dist`目录下，满足了公司要求的打包目录名称。 这种方法的好处是，你可以在不破坏项目原始结构和配置的情况下，对`create-react-app`进行定制，而且...
webpack打包并将文件加载到指定的位置方法
11-27
使用webpack打包，最爽的事情莫过于可以直接require文件了，但是这 同时带来了一个问题，就是所有的文件整合到一起，那这一个包就太大了。 基于此：下面我们来了解下webpack的打包（主要是将如何将我们需要的内容模块，分开打包， 并且按照我们自己设定的存放路径进行存放） 首先在webpack.config.js文件中 entry入口函数出表示出哪些是需要单独打包成一个js包的： entry: { main: path.resolve(__dirname,'src/index.js'), jq: ['jquery'], react: ['react'], redom:
webpack 打包出多个HTML文件，多个js文件，图片文件放置到指定文件夹中
u012377866的博客
04-15 1862
一、webpack.config.js简单代码 const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { //mode 指打包模式 //development 指开发模式，代码未压缩 //production 指产品模式，代码压缩 mode: 'development...
webpack教程--17输出路径处理
jiaojsun的博客
10-18 779
打包路径处理 这是一个可以清理打包后文件夹的插件 npm i -D clean-webpack-plugin@0 然后这样引入 这样每次npm run dev的时候就会自动更新dist文件夹的内容 要想每次都输出到指定的目录，以及到相对应的名称，可以这样配置 同样的图片和js的文件也做相应处理 然后再本地打开index.html文件，报错 下一节来解决这个问题 ...
基于Vue-cli的多目录项目配置
riddle1981的博客
09-28 5263
直接用vue-cli创建的项目可以创建一个单页面应用，开发环境和生产环境都是以一个单独的项目为目录的。在写一些有共性的模块时需要将所有组件放在同一个大的框架下的同时又需要每个模块可以进行单独的启动和打包。此时就需要进行个性化配置。
webpack打包路径更改_webpack打包如何统一js和css中图片资源路径
weixin_30510711的博客
01-14 561
目前项目应用的是vue-cli,自行修改了部分配置.三个环境的情况跟你差不多,测试/生产环境的层级比你还深。先说下修改了哪些配置1-build/utils.js下的cssLoaders内的generateLoaders方法内部的// Extract CSS when that option is specified// (which is the case during production bu...
webpack打包图片路径问题
weixin_34419326的博客
09-04 778
那些年，我用webpack踩过的坑 webpack打包图片文件路径问题 output.publicPath 将publicPath在浏览器中引用时指定输出文件的公共URL地址。 处理静态资源引用地址用的 。 打包后默认情况是url(文件名) 这样必须确保资源文件和css处于同一目录，但我们显然不希望这样，希望修改打包引用地址。 {te...
配置 webpack的打包路径
热门推荐
weixin_39090097的博客
07-27 1万+
  在 src 目录下面 新建一个 webpack.config.js 文件  按照图示 设置 需要打包的文件 ，配置打包后输出到哪个文件及路径  配置完成以后，直接在终端 输入 webpack 就会实现自动打包，小伙伴赶紧动手试一下 如果说 我们想要 我们一修改文件，不用我们手动打包，就想让我们 修改的文件生效 1、可以在 package.json 文件中配置 dev: webpa...
使用webpack根据不同的环境打包
HQ DevJ的专栏
06-02 1421
使用webpack根据不同的环境打包前提准备工作工作目录结构编写common.jsdev.js,tenv.js,prod.js进行打包配置 前提 我们在进行项目开发的时候，一般在不同的环境下面使用不同的代码分支，常见的有dev-开发分支、test-测试分支、uat-准生产分支、prod-生产分支，生产分支和准生产分支基本上是一样的。dev分支一般作为本地的开发分支使用，连接相关的ip进行相关调试的代码本地联调，测试环境就是对接的测试环境的ip或者域名进行测试联调，生产分支作为线上分支使用，供外部使用。 但是
解决webpack打包后根目录下有子文件夹的路径不匹配
米兰小铁匠的博客
06-22 2674
问题描述：项目打包后发布上线，不是放在服务器的根目录下，而是放在根目录的子文件夹下，这个时候项目的html中有手动引入的link/script的src和href文件。打包后对于这些文件不能正确的拼接子文件夹为路径 解决办法： 1、如果项目是采用的vue-cli3的webpack打包的 在vue.config.js中增加publicPath配置项，这个publicPath配置项中写入我要拼接的子文件...
swagger v3,项目编译后,没有输出outputPath到指定目录
最新发布
06-09
你好，关于你的问题，可能是你的webpack配置有误导致没有输出到指定目录。可以尝试以下几个步骤来解决问题： 1. 确认你的webpack配置文件中是否正确配置了output字段，指定了输出路径和文件名。 2. 确认你的命令行...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值