0

I have been using this webpack config for my project. I would like to have all the files in the "src" directory to be processed and placed in the directory "www".

I.e.:

src/*.css -> csso -> www/*.css

src/*.html -> inline-css -> html-minify -> www/*.html

src/*.js -> rollup -> babel -> uglifyjs -> www/*.js

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CssoWebpackPlugin = require('csso-webpack-plugin').default;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

module.exports = {
    mode: 'production',
    entry: './src/app.js',
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }, {
                loader: 'webpack-rollup-loader',
                options: {
                    experimentalCodeSplitting: true,
                    optimizeChunks: true
                }
            }]
        }]
    },
    output: {
        path: path.resolve(__dirname, 'www'),
        publicPath: '',
        filename: 'app.js'
    },
    optimization: {
        minimize: true,
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                uglifyOptions: {
                    ecma: 5,
                    warnings: true,
                    mangle: false,
                    compress: {
                        dead_code: false,
                        drop_console: true,
                        loops: false,
                        unsafe: true,
                        unsafe_comps: true,
                        unsafe_proto: true,
                        unused: false,
                        warnings: true,
                        sequences: false,
                        passes: 3
                    }
                }
            })
        ]
    },
    plugins: [
        new ExtractTextPlugin('[name].css'),
        new CssoWebpackPlugin(),
        new HtmlWebpackPlugin({
            inlineSource: '.(css)$',
            alwaysWriteToDisk: true,
            filename: 'index.html',
            template: 'src/index.html',
            minify: {
                quoteCharacter: '"',
                decodeEntities: true,
                sortAttributes: true,
                removeComments: true,
                collapseWhitespace: true
            }
        }),
        new HtmlWebpackHarddiskPlugin({
            outputPath: path.resolve(__dirname, 'www')
        }),
        new HtmlWebpackInlineSourcePlugin()
    ]
}

What am I doing wrong?

A. Petrov
  • 902
  • 1
  • 6
  • 6
  • What is going wrong? where it is going to? – PlayMa256 Jun 21 '18 at 12:26
  • Console: "(rejection id: 1): Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead" And nothing happens... – A. Petrov Jun 21 '18 at 14:24
  • Interesting: it is messing up with the entry point. Why are you using rollup if webpack already does everything?? Second: have you read the note from rollup-loader creator? `Note: This loader must only be applied once to the entry module. Using it to load all .js files (or even just recursively) has undefined behaviour and is likely to produce horrendously incorrect code.` – PlayMa256 Jun 21 '18 at 15:02
  • TL;TR: it should not be used the way that you are using. Just remove rollup and go with webpack instead. Both tools does the same thing, why use both at the same time? – PlayMa256 Jun 21 '18 at 15:03

0 Answers0