webpack項目在開發環境中使用靜態css文件

在webpack項目（本人使用的 vue-cli-webpack ）中，需要引入 css 或 scss等樣式文件時，本人目前知道的，通常有以下幾種方法：

1. 在js文件中import（假設已配好相關的loader）
   如在main.js中import 'izitoast/dist/css/izitoast.min.css'
2. 在自己寫的 scss 等文件中 @import
   如@import '../../assets/scss/widgets.scss';（在src目錄下）
3. 在index.html文件中使用cdn：
   如 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

如果你不想使用使用上述方法，想要將 css 文件放置在 /static目錄下，像通常一樣通過link引入；或者使用上述方法有問題時：
如本人在使用 import方法在main.js中引入font-awesome.min.css時，老是出問題：

warning  in [workspace]/~/.3.0.1@vue-style-loader/lib/listToStyles.js

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other
case-semantic.
...

又不想在開發環境中一直使用CDN，那么怎么辦呢？

如果直接在index.html中使用<link rel="stylesheet" href="./static/css/font-awesome.min.css">，npm run dev時webpack是無法幫你從目標目錄中加載css文件的，
因為 dev-server 中沒有 此對應目錄！
因為你的css文件沒有經過webpack處理（應該是這樣吧？）
那么，只好...
stackoverflow！

http://stackoverflow.com/questions/27639005/how-to-copy-static-files-to-build-directory-with-webpack

此問題下的回答主要提供了兩種方法（原理上是一種，都是用 file-loader 來處理 靜態的css文件）：

• 使用插件：copy-webpack-plugin
• 直接使用 file-loader

---

下面開始使用copy-webpack-plugin的案例。
本人的環境為 vue-cli-webpack 項目， 項目的webpack.prod.conf.js中已經配置了此插件。

因為此處是在開發環境中使用 static 下的 css，因此，第一步是在 webpack.dev.conf.js配置文件中，配置CopyWebpackPlugin

var path = require('path')
var CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = merge(baseWebpackConfig, {
    context: path.resolve('./'), // 項目根目錄、這樣配置context就不需要修改 entry 中的app地址了
    // ... 其他配置
    plugins: [
       // ... 其他插件
        new CopyWebpackPlugin([{
          from: path.resolve('./static'),
          ignore: ['.*']
        }])
    ]
})

然后在index.html文件中的head部分

<link rel="stylesheet" href="./static/css/font-awesome.min.css">
<link rel="stylesheet" href="./static/css/iview.css">
<link rel="stylesheet" href="./static/css/ol.css">

---

才疏學淺，學海無涯啊