How to use webpack to bundle html css js

Issue #645

Install webpack

npm init
npm install webpack webpack-cli --save-dev
vim webpack.config.js

module.exports = {
    entry: "./index.js",
    mode: 'production',
    output: {
        filename: "./index.js"
    }
}

To invoke webpack, run below. Your output is dist/index.js

npx webpack

Minify js

npm install babel-minify-webpack-plugin --save-dev

Minify html

npm install html-webpack-plugin --save-dev

const MinifyPlugin = require('babel-minify-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./index.js",
    mode: 'production',
    output: {
        filename: "./index.js"
    },
    plugins: [
        new MinifyPlugin(),
        new HtmlWebpackPlugin({
            template: 'index.html',
            filename: 'index.html',
            minify: {
                collapseWhitespace: true
            }
        })
    ]
}

Minify css

TBD

Copy files

Copy files from dist to public folder so we can use

npm install copyfiles -g

Then in package.json

"scripts": {
    "copy": "copyfiles -u 1 dist/* ../apps/ && copyfiles *.css ../apps"
}

Then run npm run copy Updated at 2020-04-28 13:18:40