在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ purifycss 清理無(wú)用css時(shí),導(dǎo)致很多有用的css被刪掉。

purifycss 清理無(wú)用css時(shí),導(dǎo)致很多有用的css被刪掉。

想加入purifycss功能,但是build之后,很多有用的css都沒(méi)有打包進(jìn)來(lái)?

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'
            }
        ]),

        // 美化報(bào)錯(cuò)提示
        // new FriendlyErrorsPlugin(),

        // 報(bào)錯(cuò)停止變異
        // new webpack.NoEmitOnErrorsPlugin(),

        // 單獨(dú)抽離 CSS
        new ExtractTextPlugin('css/style.css'),
        
        // 清除無(wú)用 css
        new PurifyCSSPlugin({
            paths: glob.sync(path.join(SRC_PATH, '/index.html'))
        })

    ],
    devServer: {
        // contentBase: SRC_PATH,
        inline: true,
        port: 7000
    },
    devtool: 'source-map'
};
回答
編輯回答
陪妳哭

glob.sync(path.join(SRC_PATH, '/.html')) 這里的文件目錄需要包含所有你用到樣式的地方,所有不要寫(xiě)死成index.html

2017年1月9日 23:15
編輯回答
貓館

我也遇到這個(gè)問(wèn)題
圖片描述

修改了路徑,然后就莫名好了點(diǎn),但還是有些問(wèn)題
clipboard.png

2018年7月30日 05:24
編輯回答
北城荒

我也遇到這個(gè)問(wèn)題。
測(cè)試了下

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

解決辦法:
1.new ExtractTextPlugin 放在new PurifyCSSPlugin之前。
2.檢查下'../src/*.html'路徑是否有問(wèn)題。

2018年2月27日 17:46
編輯回答
焚音

樓主這個(gè)問(wèn)題解決了嗎?我也遇到了同樣的問(wèn)題求指教

2018年6月12日 17:47