webpack设置不打包文件

一、需求

要实现webpack打包后，一个全局配置文件不被打包。最终目的是我们可以在打包后的文件中修改这个文件（比如配置全局请求url前缀等等）。

要实现这个功能需要两步操作。

1、复制不打包文件
2、引入文件

二、复制文件

这里的复制文件指将无需打包的文件复制至打包后的静态文件

1. 安装依赖

npm i copy-webpack-plugin -s

2. 引入依赖

需要在webpack配置文件中引用并配置。

    const CopyWebpackPlugin = require('copy-webpack-plugin')

3. webpack-plugins配置

以下代码需放在webpack配置的plugins数组中

new CopyWebpackPlugin([{from: resolve(__dirname, './static'), // 不打包直接输出的文件to: 'static', // 打包后静态文件放置位置ignore: ['.*'] // 忽略规则。（这种写法表示将该文件夹下的所有文件都复制）}
]),

三、引入文件

在html中引入不打包的配置文件，一般不打包文件都放在根目录下的static文件夹中，打包后放在dist文件夹。在html文件中使用script标签引用即可。

注意

不要使用require或者import的方式引入文件，否则该文件就会参与打包，从而使打包后修改配置的操作失效。

有什么问题欢迎留言~

END

webpack设置不打包文件相关推荐

webpack处理iconfont字体文件打包
首先你要先会用iconfont 如果还不会建议观看我的文章 iconfont创建前端图标库先在我们的文件夹里建一个项目 npm init 根据提示操作就会生成一个package.json 我们现在 ...
webpack打包:文件+图片+图标字体......
webpack是什么? webpack本质是一个第三方的模块包,用于分析,并打包代码. 支持所有类型的文件包支持less/sass转换成css 支持ES6/7/8降级为ES5:(为什么降级?是为了更 ...
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下一.首先修改c ...
自定义配置webpack打包文件
基础使用安装 npm install webpack -g 模块化程序(配置过程忽略此步骤) cale.js function add(a,b){return a + b; } module.exp ...
webpack配置：css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{color:red;font-size:20px; } 2.css建立好后,需要引入 ...
webpack配置---设置快捷打包和浏览器自动刷新
1.设置快捷打包找到package.json中scripts 之后再输入命令npm run build 2.设置浏览器自动刷新要先安装html-webpack-plugin这个插件再配置 3.将c ...
webpack 最简打包结果分析
原文链接:https://ssshooter.com/2019-02... 现在的 webpack 不再是入门噩梦,过去 webpack 最让人心塞的莫过于配置文件,而 webpack4 诞生随之而来 ...
vue-cli新建的项目webpack设置涉及的大部分插件整理
portfinder 用来检测未占用的端口更多看这里: https://www.npmjs.com/package/portfinder webpack-merge 用来合并多个webpack设置, ...
【webpack系列】webpack小老弟打包大项目
上集回顾: 话音刚落 ~ npm老大哥又来电话了[有大工程]. "喂,老大哥,对方啥阵形啊?" "4-4-2? 踢你的?" "行,马上带上大姨夫嗷,拜 ...