purifycss 清理无用css时，导致很多有用的css被删掉。

Question

想加入purifycss功能，但是build之后，很多有用的css都没有打包进来？

webpack.build.js
var webpack = require('webpack');
var path = require('path');
var glob = require("glob");

let HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

const CleanWebpackPlugin = require('clean-webpack-plugin');

const CopyWebpackPlugin = require('copy-webpack-plugin');

const PurifyCSSPlugin = require('purifycss-webpack');

//定义部分资源路径
var ROOT_PATH = path.resolve(__dirname);
var SRC_PATH = path.resolve(ROOT_PATH, "src");
var BUILD_PATH = path.resolve(ROOT_PATH, "dist");
var NODE_MODULES_PATH = path.resolve(ROOT_PATH, "node_modules");

console.log(1121212)
console.log(glob.sync(path.join(SRC_PATH, '/*.html')))

module.exports = {
    entry: {
        app: path.resolve(__dirname, 'src/app.js')
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        publicPath: '/',
        chunkFilename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader']
                })
            },
            {
                test: /\.scss$/,
                // loader: 'style-loader!css-loader!sass-loader!postcss-loader'
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    // resolve-url-loader may be chained before sass-loader if necessary
                    use: ['css-loader?minimize', 'postcss-loader', 'sass-loader']
                })
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    },
                ]
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
                
            },
            {
                test: /\.(png|jpg|gif|svg)/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'imgs/[name].[hash:4].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.(htm|html)/,
                use: ['html-withimg-loader']
            },
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json', 'jsonp', '.scss', '.less']
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"',
            },
        }),

        // 清理文件
        new CleanWebpackPlugin(BUILD_PATH),

        // 拷贝文件
        new CopyWebpackPlugin([
            {
                from: __dirname + '/src/components',
                to: __dirname + '/dist/components',
                ignore: '*.jsx'
            }
        ]),

        // 美化报错提示
        // new FriendlyErrorsPlugin(),

        // 报错停止变异
        // new webpack.NoEmitOnErrorsPlugin(),

        // 单独抽离 CSS
        new ExtractTextPlugin('css/style.css'),
        
        // 清除无用 css
        new PurifyCSSPlugin({
            paths: glob.sync(path.join(SRC_PATH, '/index.html'))
        })

    ],
    devServer: {
        // contentBase: SRC_PATH,
        inline: true,
        port: 7000
    },
    devtool: 'source-map'
};

Answer 1

我也遇到这个问题

修改了路径，然后就莫名好了点，但还是有些问题

Answer 2

glob.sync(path.join(SRC_PATH, '/.html')) 这里的文件目录需要包含所有你用到样式的地方，所有不要写死成index.html

Answer 3

我也遇到这个问题。
测试了下

    new ExtractTextPlugin("css/index.css"), 
    new PurifyCSSPlugin({ 
      paths: glob.sync(path.join(__dirname, '../src/*.html')),
    }),
    
   

解决办法：
1.new ExtractTextPlugin 放在new PurifyCSSPlugin之前。
2.检查下'../src/*.html'路径是否有问题。

Answer 4

楼主这个问题解决了吗？我也遇到了同样的问题求指教

Answer 5

遇到相同的问题，三楼提供的办法可以解决
new ExtractTextPlugin({

filename: "css/[name].css?[hash:8]"

}),
new PurifyCSSPlugin({

paths: glob.sync(path.join(__dirname, "../src/pages/*/*.html"))

})

Answer 6

今天我也遇到这样的问题，楼上的回答给了很多提示，最后我是这样解决的:

const glob = require('glob-all');
plugins: [
    new ExtractTextPlugin({
          filename: "css/[name].css?[hash:8]"
        }),
    new PurifyCSSPlugin({
      paths: glob.sync([
        path.join(__dirname, '../index.html'),
        path.join(__dirname, '../src/*/*.jsx')
      ])
    })
]

解决办法：
1.安装 glob-all，自带的 glob.sync 只能传一个字符串参数。
1.new ExtractTextPlugin 放在 new PurifyCSSPlugin 之前。
2.glob.sync 中配置所有你引用过样式的文件（注意路径），如 html,jsx。