webpack | 多页面打包

我们大部分做应用，都不是单网页应用，而是多网页应用，那多页面应用的时候怎么打包。

vue 是单页面应用，具体的原理我还不懂，等懂了之后，再写一篇博文吧。

这篇博文重点讲的是如何打包多页面应用！

多页面打包，又叫多入口打包，入口指的就是页面，当然不准确，但是，可以简单的这么理解！

先看一下我的目录结构

|___src
|______image
|______json
|______pages
|_________... 各种页面
|_________...
|___util
|___.babelrc
|___package.json
|___package_lock.json
|___webpack.config.js

我把多个页面放在了 pages 比如包括

• index
• user
• …

而我们打包页面主要是在 webpack.config.js

贴一下关键代码。

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    resolve: {
        ...
    },
    entry: {
        index: './src/pages/index/index.js',
        camera: './src/pages/camera/index.js',
        select: './src/pages/select/index.js',
        static: './src/pages/static/index.js',
    },
    output: {
        filename: "js/bundle.[contentHash].js",
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'production',
    devServer: {
        ...
    },
    module: {
        rules: [
            ... 
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
        }),
        new MiniCssExtractPlugin({
            filename: 'css/style.[name].[contentHash].css',
        }),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin(
            {
                template: './src/pages/camera/index.html',
                filename: "camera.html",
                chunks: ['camera']
            }
        ),
        new HtmlWebpackPlugin(
            {
                template: './src/pages/index/index.html',
                filename: "index.html",
                chunks: ['index'],
            }
        ),
        new HtmlWebpackPlugin(
            {
                template: './src/pages/static/index.html',
                filename: "static.html",
                chunks: ['static']
            }
        ),
        new HtmlWebpackPlugin(
            {
                template: './src/pages/select/index.html',
                filename: "select.html",
                chunks: ['select']
            }
        ),
    ]
}

这里面主要的控制是

• entry 属性
• HtmlWebpackPlugin 插件
  • npm | 插件 html-webpack-plugin

这个多页面打包配置可以做到下面的功能

• 多页面分别打包到 dist 文件夹
• 将自己的 js 文件，css 文件分别打包，然后页面会自动引用相关文件，而不是，把所有的内容放在同一文件中

OK，来看一下，我打包后的目录。

下面我贴一下，配置文件的所有代码

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    resolve: {
        alias: {
            src: path.resolve(__dirname, 'src'),
            '@pages': path.resolve(__dirname, 'src/pages')
        }
    },
    entry: {
        index: './src/pages/index/index.js',
        camera: './src/pages/camera/index.js',
        select: './src/pages/select/index.js',
        static: './src/pages/static/index.js',
    },
    output: {
        filename: "js/bundle.[contentHash].js",
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'production',
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        port: 9000,
        proxy: {
            '/api': {
                target: "https://aip.baidubce.com",
                pathRewrite: {
                    '^/api': '',
                },
                changeOrigin: true,
            }
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: './dist',
                    },
                }, {
                    loader: "css-loader",
                }
                ]
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                },
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                            name: 'images/[name].[hash].[ext]'
                        }
                    }
                ],
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                loader: 'file-loader',
                options: {
                    esModule: false,
                    name: 'fonts/[name].[hash].[ext]'
                }
            },
            {
                test: /\.html$/i,
                use: [{
                    loader: 'html-loader'
                }]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
        }),
        new MiniCssExtractPlugin({
            filename: 'css/style.[name].[contentHash].css',
        }),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin(
            {
                template: './src/pages/camera/index.html',
                filename: "camera.html",
                chunks: ['camera']
            }
        ),
        new HtmlWebpackPlugin(
            {
                template: './src/pages/index/index.html',
                filename: "index.html",
                chunks: ['index'],
            }
        ),
        new HtmlWebpackPlugin(
            {
                template: './src/pages/static/index.html',
                filename: "static.html",
                chunks: ['static']
            }
        ),
        new HtmlWebpackPlugin(
            {
                template: './src/pages/select/index.html',
                filename: "select.html",
                chunks: ['select']
            }
        ),
    ]
}