Question

我尝试将purifycss-webpack与webpack和silverstripe模板一起使用。 Purifycss文档说它可以与Templates以及任何使用CSS选择器的东西一起使用。我已经准备好一切。当我尝试运行它时，出现此错误：

(function (exports, require, module, __filename, __dirname) { <section
SyntaxError: Unexpected token <

在我看来，模板似乎无法读取。

这是我的webpack配置：

const glob = require('glob-all');
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack- 
plugin');
const {ImageminWebpackPlugin} = require("imagemin-webpack");
const imageminOptipng = require("imagemin-optipng");
const imageminGifsicle = require("imagemin-gifsicle");
const imageminJpegtran = require("imagemin-jpegtran");
const imageminSvgo = require("imagemin-svgo");
const PurifyCSSPlugin = require('purifycss-webpack');

module.exports = {
  entry: {
    app: ['./src/js/entry.js', './src/css/main.scss'],
},
output: {
    filename: "js/[name].min.js",
    path: path.resolve(__dirname, "./dist"),
},
mode: 'production',
module: {
    rules: [
        {
            test: /\.ss/,
            loader: 'silverstripe-template-loader'
        },
        {
            test: /\.(scss|css)$/,
            use: [
                {
                    loader: 'style-loader'
                },
                {
                    loader: MiniCssExtractPlugin.loader
                },
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: 'resolve-url-loader',
                },
                {
                    loader: 'sass-loader',
                    options: {
                        sourceMap: true
                    }
                }
            ]

        },
        {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['babel-preset-env']
                }
            }
        },
        {
            test: /\.(png|svg|jpe?g|gif)$/,
            loader: 'file-loader',
            options: {
                name: 'images/[name].[ext]',
                publicPath: '/public/dist/',
            }
        },
    ]
},
plugins: [
    new CleanWebpackPlugin(['dist']),
    new MiniCssExtractPlugin({
        filename: 'css/[name].min.css',
        chunkFilename: "[id].css"
    }),
    new PurifyCSSPlugin({
        paths:  glob.sync([
      path.join(require('/Users/foobar/Desktop/hsb/www/app/templates/DNADesign/Elemental/Layout/FBNewsHolder.ss')),
        ]),
    }),
    new ImageminWebpackPlugin({
        imageminOptions: {
            plugins:[
                imageminOptipng({
                    optimizationLevel: 5
                }),
                imageminGifsicle({
                    interlaced: true
                }),
                imageminJpegtran({
                    progressive: true
                }),
                imageminSvgo({
                    removeViewBox: true
                })
            ]
        }
    })
  ],
}

这是他们与silverstripe tempaltes一起使用purifycss的一种方法。谁能帮我这个忙吗？？？

Answer 1

我成功了。万一有人遇到同样的问题，她是我的有效的webpack配置

const glob = require('glob-all');
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const {ImageminWebpackPlugin} = require("imagemin-webpack");
const imageminOptipng = require("imagemin-optipng");
const imageminGifsicle = require("imagemin-gifsicle");
const imageminJpegtran = require("imagemin-jpegtran");
const imageminSvgo = require("imagemin-svgo");
const PurifyCSSPlugin = require("purifycss-webpack");
const PATHS = path.join(__dirname, '../../www/app/templates/');



module.exports = {
    entry: {
        app: ['./src/js/entry.js', './src/css/main.scss'],
    },
    output: {
        filename: "js/[name].min.js",
        path: path.resolve(__dirname, "./dist"),
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.ss/,
                loader: 'silverstripe-template-loader'
            },
            {
                test: /\.(scss|css)$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]

            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['babel-preset-env']
                    }
                }
            },
            {
                test: /\.(png|svg|jpe?g|gif)$/,
                loader: 'file-loader',
                options: {
                    name: 'images/[name].[ext]',
                    publicPath: '/public/dist/',
                }
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new MiniCssExtractPlugin({
            filename: 'css/[name].min.css',
            chunkFilename: "[id].css"
        }),
        new PurifyCSSPlugin({
            paths:  glob.sync([
                path.join(PATHS + 'DNADesign/Elemental/Layout/FBNewsHolder.ss'),
            ]),

        }),
        new ImageminWebpackPlugin({
            imageminOptions: {
                plugins:[
                    imageminOptipng({
                        optimizationLevel: 5
                    }),
                    imageminGifsicle({
                        interlaced: true
                    }),
                    imageminJpegtran({
                        progressive: true
                    }),
                    imageminSvgo({
                        removeViewBox: true
                    })
                ]
            }
        })
    ],
}

我没有获得如何使用节点路径模块的信息。那就是问题所在。

使用Silverstripe模板（purifycss-webpack-plugin，webpack，Silverstripe模板）进行净化时出现SyntaxError

1 个答案: