为多页HTML5网站设置webpack

Question

这是我第一次使用webpack。我已经阅读了文档文章，答案等，但这让我对如何设置webpack以用于静态多个HTML5网页感到困惑。

我基本上想要实现以下目标：

• 捆绑并缩小特定页面的所有 js 。
• 使用babel loader将ES6转换为ES5。
• 将特定页面的所有 css 捆绑并缩小。
• autoprefix css属性。
• 将特定网页的所有资源捆绑在一起。

我读到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"])
    ]
};