webpack配置踩坑心得_exclude和You may need an appropriate loader to handle this file type.

問題描述

在導入 bootstrap.css 的時候，報錯：此處 bootstrap 爲 3.3.7 版本

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css 7:5
Module parse failed: Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
|  */
| /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

> html {
> |   font-family: sans-serif;
> |   -webkit-text-size-adjust: 100%;
>  @ ./src/components/CmtList.jsx 28:0-55 29:12-19
>  @ ./src/index.js
>  @ multi (webpack)-dev-server/client?http://localhost:8081 (webpack)/hot/dev-server.js ./src

可是我明明配置了 css-loader sass-loader less-loader file-loader url-loader 等各種loader。。。 

出錯原因及解決辦法

{
    test: /\.css$/,
    use: [
            'style-loader',
            'css-loader?modules&localIdentName=[path][name]-[local]-[hash:6]'
    ],
    exclude: /(node_modules|bower_components)/
}

在解析 css ,ttf 等各種靜態資源的時候，不要添加 exclude 排除項，bootstrap.css 位於 node_modules 文件夾中，排除之後 css-loader 將不起作用。

應該去掉 exclude 配置：

{
    test: /\.css$/,
    use: [
            'style-loader',
            'css-loader?modules&localIdentName=[path][name]-[local]-[hash:6]'
    ]
}