ExtractTextPlugin 打包css时报错!

webpack.prod.conf.js

"use strict";
const path = require('path');
const webpack = require('webpack');

//引入webpack开发环境配置参数
const prodConf = require('../config').build;
//引入webpack基本配置
const baseConf = require('./webpack.base.conf');
//一个webpack配置合并模块,可简单的理解为与Object.assign()功能类似!
const merge = require("webpack-merge");
//一个创建html入口文件的webpack插件!
const HtmlWebpackPlugin = require("html-webpack-plugin");
//一个抽离出css的webpack插件!
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//一个压缩css的webpack插件!
const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
//一个拷贝文件的webpack插件!
const CopyWebpackPlugin = require("copy-webpack-plugin");


// 资源路径
function assetsPath(dir) {
    return path.join(prodConf.assetsPath, dir)
}

const prod = merge({}, baseConf, {
    output: {
        //Build后所有文件存放的位置
        path: path.resolve(__dirname, '../dist'),

        //html引用资源路径,可在此配置cdn引用地址!
        publicPath: prodConf.publicPath,

        //文件名
        filename: assetsPath('js/[name].[chunkhash].js'),

        //用于打包require.ensure(代码分割)方法中引入的模块
        chunkFilename: assetsPath('js/[name].[chunkhash].js')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: ["css-loader", "postcss-loader"],
                    fallback: "vue-style-loader"
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    use: ["css-loader", "less-loader", "postcss-loader"],
                    fallback: "vue-style-loader"
                })
            }
        ]
    },
    plugins: [
        //将整个文件复制到构建输出指定目录下
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, "../static"),
                to: prodConf.assetsPath,
                ignore: [".*"]
            }
        ]),

       
        new ExtractTextPlugin({
          filename: assetsPath('css/[name].[contenthash].css')
        }),
        // new ExtractTextPlugin('style.css'),

        new HtmlWebpackPlugin({
            filename: path.resolve(__dirname, '../dist/index.html'),
            template: 'index.html',
            favicon: path.resolve(__dirname, '../favicon.ico'),
            inject: true,
        })
    ]
})

module.exports = prod

当我使用 ExtractTextPlugin 打包时便会报以下错误

图片描述

但我不使用 ExtractTextPlugin来打包css 就不会报错,能正常打包

style.css
图片描述

// removed by extract-text-webpack-plugin 的地址
图片描述

请问是哪里写错了吗,我还重新下载了几次这个模块,也不管用

阅读 2.5k
2 个回答

语法错误, 将style.css 中的 // xxxx 注释 改成 /* xxxx */

clipboard.png

style.css

图片描述

// removed by extract-text-webpack-plugin 的错误

图片描述

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题