Webpack config for website

135 Views Asked by At

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?

0

There are 0 best solutions below