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

Question

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

发布于
2018-06-03

使用Webpack^4.6.0 + React + React-router(配合react-loadable)按需加载，在生产环境打包编译时压缩CSS报错，并且多次打包有时候可以完成，但是打包出来的CSS未压缩，并且有些CSS文件里打包的好像是js代码，通过服务器运行有些样式好像并没有生效？
关键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"}],
        
    ]
}

路由按需加载

/*---------按需加载组件---------------*/
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
});