webpack中的CSS压缩

问题描述

npm run build失败
报错如下
![![图片描述][2]][1]
图片描述

问题出现的平台版本及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
webpack.prod.js文件

const merge=require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports=merge(common,{
    mode:'production',
    devtool:'source-map',
    optimization:{
        minimizer:[
            new UglifyJsPlugin({
                cache:true,
                parallel:true,
                sourceMap:false

            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename:"[name].css",
            chunkFilename:"[id].css"
        })
    ],
    module:{
        rules:[
            {
                test: /\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                use:['url-loader']
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf})$/,
                use:['file-loader']
            },
            {
                test: /\.(.json)$/,
                use:['json-loader']
            }
        ]
    }
});

index.js入口文件

import './my-component/style.css';
import Data from './my-component/data.json';
import {cube} from './math.js';
if(process.env.NODE_ENV!=='production'){
    console.log('当前处于开发环境中');
}
else{
    console.log('当前处于生产环境中');
}
function component(){
    var element=document.createElement('pre');
    element.innerHTML=[
        'Hello webpack',
        '5 cubed is equal to ' + cube(5)
    ].join('\n\n');
    element.classList.add('hello');
    return element;
}
document.body.appendChild(component());
console.log(Data);
// if(module.hot){
//     module.hot.accept('./print.js',function(){
//         console.log('Accepting the updated printMe module!');
//         document.removeChild(element);
//         element=component();
//         document.body.appendChild(element);
//     })
// }

你期待的结果是什么?实际看到的错误信息又是什么?

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