extract-text-webpack-plugin配置出错的解决办法

最新推荐文章于 2024-08-15 09:19:44 发布

蚁方阵

最新推荐文章于 2024-08-15 09:19:44 发布

阅读量1.4w

点赞数 2

分类专栏：项目构建文章标签： webpack extractcss 插件配置出错 loader-err 解决办法

本文链接：https://blog.csdn.net/yiifaa/article/details/78868600

版权

项目构建专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在Webpack集成extract-text-webpack-plugin中，总提示无法找到正确的loader，如下：

Module build failed: ModuleParseError: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
ERROR in ./styles/header.css
    Module parse failed: Unexpected character '@' (1:0)
    You may need an appropriate loader to handle this file type.

开始以为是引用的问题，按照提示将代码

import 'styles/header.css'

改为

import 'css!styles/header.css'

或者

import 'css-loader!styles/header.css'

或者

require('css-loader!styles/header.css')

但错误依旧，翻阅官方文档，发现配置已经不是用“!”连接，而是多了fallback，于是按照官方示例进行更改：

{
    test: /\.css$/,
    loader: ExtractTextPlugin.extract({
        fallback: 'style-loader', 
        use: ['css-loader']
    })
}, {
    test: /\.less$/,
    loader: ExtractTextPlugin.extract({
        fallback: 'style-loader', 
        use: ['css-loader', 'less-loader']
    })
}

在此提示一下，webpack.config既可以按照“moduel>rules>use”方式配置，也可以按照“moduel>loaders>loader”配置，都能正常工作。

完整的代码实例在我的Github。

最后，吐槽一句，webpack的官方插件文档太old了。