在webpack中如何单独打包指定JS文件
下面我就为大家分享一篇webpack 单独打包指定JS文件的方法，具有很好的参考价值，希望对大家有所帮助。
背景
最近接到一个需求，因为不确定打出的前端包所访问的后端IP，需要对项目中IP配置文件单独拿出来，方便运维部署的时候对IP做修改。因此，需要用webpack单独打包指定文件。
CommonsChunkPlugin
module.exports = {
entry: {
app: APP_FILE // 入口文件
},
output: {
publicPath: './dist/', //输出目录，index.html寻找资源的地址
path: BUILD_PATH, // 打包目录
filename: '[name].[chunkhash].js', // 输出文件名
chunkFilename: '[name].[chunkhash].js' // commonChunk 输出文件
}
}题外话
{
先说一下publicPath ， 这边有一个注意的点，即路径写成 ./dist 相对路径。如果写成/dist/这种绝对路径，有一个弊端是当nginx把前端的包没有放在根目录的情况下，index.html会访问资源失败。因此推荐写成相对路径，但是当使用相对路径时，有会存在一个潜在的问题，即项目本身的路由访问如果是HTML5模式，而不是使用hash时（路由上有一个#号），那么项目一样会部署失败。angular，react都会有这样的问题，vue没用过，应该类似。此时的解决办法是，在index.html的head中添加base标签，即：
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <base href="/" rel="external nofollow" > </head>
}
webpack本身基于模块化，因此大多数情况下，我们仅需要一个入口文件就可以搞定。而针对本次需求，需要在app，这个入口之外再添加一个入口文件。即：
entry: {
app: APP_FILE // 入口文件
ip: IP_FILE
},仅这样对webpack配置之后，dist文件会成功打出app.xxx.js及ip.xxx.js，但是打包出的项目还是会报错，解决办法是：维持IP的入口文件不变，但是把它当作commonChunk来处理。即在plugins中加入：
new webpack.optimize.CommonsChunkPlugin({name: 'ip', minChunks: Infinity}),这样保证优先加载ip.xxx.js，避免报错。
缺点：这样打包有一个很明显的缺点，即是打包出的文件是压缩的，不方便对文件进行二次修改。（没有找到解决压缩的办法）
CopyWebpackPlugin
最终解决办法，还是通过让ip.js这个文件脱离项目的模块化，然后在index.html中单独引用。（这是最开始就想到的解决办法，但并不是自己想要的解决方案，但无奈认知有限，没有解决掉之前的问题）。
解决流程：
首先在webpack引入CopyWebpackPlugin, 配置代码：
new CopyWebpackPlugin([
{from: './src/config/ip.js', to: 'ip.js'},
])在index.html中单独引入script标签，注意要配置一个随机后缀，即：
<script>
document.write("<s"+"cript type='text/javascript' src='./dist/ip.js?"+Math.random().toString(36).substr(2)+"'></scr"+"ipt>");
</script>防止ip.js因为缓存导致问题。
以上，就解决了webpack单独打包指定js的问题。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上是在webpack中如何单独打包指定JS文件的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
VUE3入门教程：使用Webpack进行打包和构建
Jun 15, 2023 pm 06:17 PM
Vue是一款优秀的JavaScript框架，它可以帮助我们快速构建交互性强、高效性好的Web应用程序。Vue3是Vue的最新版本，它引入了很多新的特性和功能。Webpack是目前最流行的JavaScript模块打包器和构建工具之一，它可以帮助我们管理项目中的各种资源。本文就为大家介绍如何使用Webpack打包和构建Vue3应用程序。1.安装Webpack
vite和webpack的区别是什么
Jan 11, 2023 pm 02:55 PM
区别：1、webpack服务器启动速度比vite慢；由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。2、vite热更新比webpack快；vite在HRM方面，当某个模块内容改变时，让浏览器去重新请求该模块即可。3、vite用esbuild预构建依赖，而webpack基于node。4、vite的生态不及webpack，加载器、插件不够丰富。
如何使用PHP和webpack进行模块化开发
May 11, 2023 pm 03:52 PM
随着Web开发技术的不断发展，前后端分离、模块化开发已经成为了一个广泛的趋势。PHP作为一种常用的后端语言，在进行模块化开发时，我们需要借助一些工具来实现模块的管理和打包，其中webpack是一个非常好用的模块化打包工具。本文将介绍如何使用PHP和webpack进行模块化开发。一、什么是模块化开发模块化开发是指将程序分解成不同的独立模块，每个模块都有自己的作
webpack怎么将es6转成es5的模块
Oct 18, 2022 pm 03:48 PM
配置方法：1、用导入的方法把ES6代码放到打包的js代码文件中；2、利用npm工具安装babel-loader工具，语法“npm install -D babel-loader @babel/core @babel/preset-env”；3、创建babel工具的配置文件“.babelrc”并设定转码规则；4、在webpack.config.js文件中配置打包规则即可。
使用Spring Boot和Webpack构建前端工程和插件系统
Jun 22, 2023 am 09:13 AM
随着现代Web应用程序的复杂性不断增加，构建优秀的前端工程和插件系统变得越来越重要。随着SpringBoot和Webpack的流行，它们成为了一个构建前端工程和插件系统的完美组合。SpringBoot是一个Java框架，它以最小的配置要求来创建Java应用程序。它提供了很多有用的功能，比如自动配置，使开发人员可以更快、更容易地搭建和部署Web应用程序。W
Webpack是什么？详解它是如何工作的？
Oct 13, 2022 pm 07:36 PM
Webpack是一款模块打包工具。它为不同的依赖创建模块，将其整体打包成可管理的输出文件。这一点对于单页面应用（如今Web应用的事实标准）来说特别有用。
vue webpack可打包哪些文件
Dec 20, 2022 pm 07:44 PM
在vue中，webpack可以将js、css、图片、json等文件打包为合适的格式，以供浏览器使用；在webpack中js、css、图片、json等文件类型都可以被当做模块来使用。webpack中各种模块资源可打包合并成一个或多个包，并且在打包的过程中，可以对资源进行处理，如压缩图片、将scss转成css、将ES6语法转成ES5等可以被html识别的文件类型。
vue中的webpack用什么安装
Jul 25, 2022 pm 03:27 PM
vue中的webpack用node包管理器“npm”或npm镜像“cnpm”来安装。webpack是一个用于现代JavaScript应用程序的静态模块打包工具，是基于node.js开发的，使用时需要有node.js组件支持；需要使用npm或者cnpm进行安装，语法“npm install webpack -g”或“cnpm install webpack -g”。
