一、需求
要實現(xiàn)webpack打包后,一個全局配置文件不被打包。最終目的是我們可以在打包后的文件中修改這個文件(比如配置全局請求url前綴等等)凤薛。
要實現(xiàn)這個功能需要兩步操作。
1绰姻、 復(fù)制不打包文件
2枉侧、 引入文件
二、復(fù)制文件
這里的復(fù)制文件指將無需打包的文件復(fù)制至打包后的靜態(tài)文件
安裝依賴
npm i copy-webpack-plugin -s
引入依賴
需要在webpack配置文件中引用并配置狂芋。
const CopyWebpackPlugin = require('copy-webpack-plugin')
- webpack-plugins配置
以下代碼需放在webpack配置的plugins數(shù)組中
new CopyWebpackPlugin([
{
from: resolve(__dirname, './static'), // 不打包直接輸出的文件
to: 'static', // 打包后靜態(tài)文件放置位置
ignore: ['.*'] // 忽略規(guī)則榨馁。(這種寫法表示將該文件夾下的所有文件都復(fù)制)
}
]),
三、引入文件
在html中引入不打包的配置文件帜矾,一般不打包文件都放在根目錄下的static文件夾中翼虫,打包后放在dist文件夾。在html文件中使用script標(biāo)簽引用即可屡萤。
注意
不要使用require或者import的方式引入文件珍剑,否則該文件就會參與打包,從而使打包后修改配置的操作失效死陆。
有什么問題歡迎留言~
END