关于webpack提取scss并转换为CSS打包压缩?

  1. 使用Webpack^4.6.0 + React + React-router(配合react-loadable)按需加载,在生产环境打包编译时压缩CSS报错,并且多次打包有时候可以完成,但是打包出来的CSS未压缩,并且有些CSS文件里打包的好像是js代码,通过服务器运行有些样式好像并没有生效?
  2. 关键webpack配置
const extractCSS = new extractTextPlugin({
            filename: 'css/[name].[md5:contenthash:hex:8].css',
            allChunks: true
        });
const extractSCSS = new extractTextPlugin({
            filename: 'css/[name].[md5:contenthash:hex:8].css',
            allChunks: true
        });
……………………
plugins: [
        // 提取CSS文件
        extractCSS,
        extractSCSS,

        // css文件压缩
        new optimizeCssPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { discardComments: { removeAll: true } },
            canPrint: true
        }),
    ],

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: [
                    'babel-loader',
                ],
                exclude: path.resolve(__dirname,' ../../node_modules'),
            },
            {
                test: /\.scss$/,
                use: extractSCSS.extract({
                use: [
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                    
                ],
                fallback: "style-loader",
                }),
                include: path.resolve(__dirname,' ../../client')
            },
            {
                test: /\.css$/,
                use: extractCSS.extract({
                    use: ['css-loader','postcss-loader'],
                    fallback: "style-loader",
                }),
                include:[
                    path.resolve(__dirname,' ../../client'),
                    path.join(__dirname, '../../node_modules/antd')
                ]
            },
            {
                test: /\.(png|jpg|jpeg|png|gif|woff|svg|eot|ttf)/,
                loader: 'url-loader?limit=8192&name=[name].[hash:8].[ext]&publicPath=' + webpackFiles.resourcePrefix + '&outputPath='+webpackFiles.resource+'/'
            },
            {
                test: /\.swf$/,
                loader: 'file?name=js/[name].[ext]'
            },
        ]
    }

});
  • post.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
  ]
};
  • .babelrc
{
    "presets": [

        ["es2015",{"loose":true,"modules": false}],

        "react",
     ],

    "env": {
        "development": {
            "presets": ["stage-2","react-hmre"]
        },
        "production": {
            "presets": ["stage-2"],
        }
    },
    
    "plugins": [
        ["import", {"libraryName": "antd", "libraryDirectory": "es", "style": "css"}],
        
    ]
}
  1. 路由按需加载
/*---------按需加载组件---------------*/
const Index = Loadable({
  loader: () => import('../views/index'),
  loading: loadingComponent
});

const Detail= Loadable({
  loader: () => import('../views/detail'),
  loading: loadingComponent
});

const Login= Loadable({
  loader: () => import('../views/login'),
  loading: loadingComponent
});
const Product= Loadable({
  loader: () => import('../views/product'),
  loading: loadingComponent
});
const Regist= Loadable({
  loader: () => import('../views/regist/regist'),
  loading: loadingComponent
});
const Seller= Loadable({
  loader: () => import('../views/userInfo/user'),
  loading: loadingComponent
});
const UserSet= Loadable({
  loader: () => import('../views/userSet'),
  loading: loadingComponent
});
  1. 报错截图

图片描述

  1. 另外使用react-loadable按需加载js打包正常,命名可以自己定义吗?求解………………
阅读 4.3k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题