一、需求

要實(shí)現(xiàn)webpack打包后，一個(gè)全局配置文件不被打包。最終目的是我們可以在打包后的文件中修改這個(gè)文件（比如配置全局請求url前綴等等）。

要實(shí)現(xiàn)這個(gè)功能需要兩步操作。

• 1、 復(fù)制不打包文件
• 2、 引入文件

二、復(fù)制文件

這里的復(fù)制文件指將無需打包的文件復(fù)制至打包后的靜態(tài)文件

1. 安裝依賴

npm i copy-webpack-plugin -s

2. 引入依賴

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

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

3. 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的方式引入文件，否則該文件就會(huì)參與打包，從而使打包后修改配置的操作失效。

有什么問題歡迎留言~

END

總結(jié)

以上是生活随笔為你收集整理的webpack设置不打包文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。