一兔魂、使用場景
在項目中有時候需要保留一些文件不被編譯壓縮栈妆,比如一些配置文件扛吞,我們需要在打包后仍然可以更改配置文件并生效初肉。
這時候我們可以通過webpack的插件copy-webpack-plugin酷鸦,保留某一文件夾下的的所有文件。
二牙咏、使用方式
- 安裝插件
cnpm install --save-dev copy-webpack-plugin
-
在項目下新建一個文件夾用于存儲不想被編譯的文件臼隔,如‘static’。
image.png - 修改webpack配置文件
// 在頭部引入插件
const CopyWebpackPlugin = require('copy-webpack-plugin');
// 在plugins配置數(shù)組中添加一項
plugins: [
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, './static'),
to: 'static',
ignore: ['.*']
}
])
]
from配置的是不被壓縮的文件夾的位置(相對于配置文件來說的位置)妄壶,本例中webpack配置文件與靜態(tài)資源文件夾均在項目根目錄下摔握。to屬性配置的是打包后靜態(tài)資源文件夾里的文件被放到打包文件夾下的隸屬文件夾名。
4.打包后的截圖
image.png
三丁寄、注意事項
static目錄下的文件不可通過require或者import的方式引入文件氨淌,否則該文件就會參與打包∫粱牵可以通過http請求靜態(tài)資源的方式盛正,如下例:
import axios from 'axios'
axios.get('static/data.json').then(res => {
if (res.status === 200) {
this.list = res.data
}
})