My first "Hello Webpack" project was going great until I started integrating purifycss-webpack. If I delete my /dist folder manually and then build, this config works. But if the /dist folder exists and CleanWebpackPlugin deletes it as its designed to do, then PurifyCSS throws this error:
clean-webpack-plugin: \dist has been removed.
purifycss-webpack\dist\index.js:52 \ if (!_fs2.default.existsSync(p)) throw new Error('Path ' + p + ' does not exist.');
Is there another way to have Webpack run PurifyCSS only AFTER all the other plugins have executed? I thought I was doing that by placing it last in the plugins array, but this feels like execution order issues to me. Here's my config:
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const globAll = require('glob-all');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const PurifyCSSPlugin = require('purifycss-webpack');
const webpack = require("webpack");
var extractPluginCSS = new ExtractTextPlugin({
filename: "app.css"
});
module.exports = {
entry: "./src/js/app.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "app.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
presets: ["env"]
}
}
]
},
{
test: /app\.scss$/,
use: extractPluginCSS.extract({
use: [
{
loader: "css-loader",
options: {}
},
{
loader: "sass-loader",
options: {}
}
]
})
},
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.(jpg|png)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "img/"
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: "./src/html/index.html"
}),
new webpack.optimize.UglifyJsPlugin(),
extractPluginCSS,
new PurifyCSSPlugin({
// Give paths to parse for rules. These should be absolute!
paths: globAll.sync([
path.join(__dirname, '/dist/*.html')
]),
// minimize: true,
verbose: true
})
]
};