Настройка веб-пакета для многостраничного HTML5-сайта

Question

Я впервые работаю с веб-пакетом.Я прочитал статьи, ответы и т. Д., Но это меня действительно смутило, как настроить веб-пакет для использования со статическими несколькими веб-страницами HTML5 .

Я в основном хочу добиться следующего:

• Объединить и минимизировать все js для конкретной страницы вместе.
• Конвертировать ES6 - ES5 с использованием Babel Loader.
• Объедините и сверните все css для конкретной страницы вместе.
• autoprefix css properties.
• Объедините все ресурсов для конкретной страницы.

Я читал о html-webpack-plugin, но действительно не понимаю, как его настроить, или есть какой-то другой способ,

Любые примеры из существующих проектов также приветствуются.Действительно хотел бы помочь.: (

Что я делал до сих пор:

package.json

{
  "name": "me",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },
  "author": "Ayan Dey",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "postcss-loader": "^2.1.5",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3"
  }
}

webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin("styles.min.css");

module.exports = {
    entry: "./app.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.min.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: "babel-loader?presets[]=es2015",
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: extractCSS.extract([
                    "css-loader",
                    "postcss-loader"
                ])
            },
            {
                test: /\.(svg|gif|jpg|png|eot|woff|ttf)$/,
                loaders: [
                    "url-loader"
                ]
            }
        ]
    },
    plugins: [
        extractCSS
    ]
};

postcss.config.js

module.exports = {
    plugins: [
        require("autoprefixer")
    ]
};

Answer 1

Похоже, что webpack.config.js отвечает моим требованиям.Хотя мне потребовалось некоторое время, чтобы пройтись по многим учебным пособиям и статьям, но пока это работает.

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin("css/[name].styles.min.css");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

const entryPoints = require("./app");

module.exports = {
    entry: entryPoints,
    output: {
        path: path.resolve(__dirname + "/dist"),
        filename: "[name].bundle.min.js",
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: ["es2015"]
                        }
                    }
                ],
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: extractCSS.extract({
                    fallback: "style-loader",
                    use: [
                        {
                            loader: "css-loader",
                            options: {
                                url: false,
                                minimize: true,
                                sourceMap: true
                            }
                        },
                        "postcss-loader"
                    ]
                })
            },
            {
                test: /\.html$/,
                use: ["html-loader"]
            },
            {
                test: /\.(svg|gif|jpg|png)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            outputPath: "assets/images/",
                            publicPath: "assets/images/"
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        extractCSS,
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "src/index.html",
            chunks: ["index"]
        }),
        new HtmlWebpackPlugin({
            filename: "page2.html",
            template: "src/page2.html",
            chunks: ["page2"]
        }),
        new CleanWebpackPlugin(["dist"])
    ]
};