36 webpack单页应用实战

演练实战

在此章节，我们将对前面的学习进行一次总结。把前面所学的知识进行综合使用，完成一次单页面应用的构建。

配置代码如下：

const path = require("path");
const HtmlwebpackPlugin = require("html-webpack-plugin");
const { CleanwebpackPlugin } = require("clean-webpack-plugin");
const CopywebpackPlugin = require('copy-webpack-plugin');
const ZipPlugin = require('zip-webpack-plugin');

module.exports = {
    // 构建模式
    mode: 'development',
    // 使用source map
    devtool: "eval",
    // 指定入口文件
    entry: './src/main/index.js',
    // 指定输出
    output: {
        // 输出文件名称
        filename: 'build.js',
        // 输出路径
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlwebpackPlugin({
            // 使用的文件模板
            template: './src/main/index.html',
            // 输出文件名称
            filename: 'index.html',
            // 设置页面窗口显示的title
            title: '演练实战'
        }),
        // 每次构建，清除上一次构建的内容
        new CleanwebpackPlugin(),
        // 拷贝public资源到输出目录下面
        new CopywebpackPlugin(
            {
                patterns: [
                    { from: 'public', to: 'public' },
                ]
            }
        ),
        // 输出资源生成zip压缩包
        new ZipPlugin({
            // 输出路径
            path: 'zip',
            // 输出资源名称
            filename: 'build.zip',
        })
    ],
    // 使用webpack-dev-server搭建本地服务器，便于开发调试
    devServer: {
        open: true, // 项目启动时，自动打开默认浏览器
        port: 8888, // 服务器运行的端口
        https: true, // 使用https服务
        historyApiFallback: true, // 确保路由切换的时候都返回一个html页面,此处返回index.html
    },
    module: {
        rules: [
            // less|css modules处理,防止class名称冲突
            {
                test: /.(css|less)$/,
                include: path.resolve(__dirname, 'src/pages'),
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: "[path][name]-[local]"
                            }
                        }
                    },
                    'less-loader',
                    // postcss-preset-env提供样式兼容和使用下一代css语法
                    // 需要设置browserslist兼容才会生效
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    'postcss-preset-env'
                                ],
                            },
                        },
                    },
                ]
            },
            // 全局样式共存
            {
                test: /.(css|less)$/,
                include: [
                    path.resolve(__dirname, 'src/main'),
                    path.resolve(__dirname, 'src/assets/font'),
                ],
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    'postcss-preset-env'
                                ],
                            },
                        },
                    },
                ]
            },
            // 字体文件处理
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'url-loader',
                    }
                ]
            },
            // 图片文件处理
            {
                test: /\.(jpg|png|gif|JPG|PNG)$/,
                loader: 'url-loader',
                options: {
                    esModule: false,
                    limit: 18000,
                    name: 'images/[hash:5].[ext]',
                    fallback: 'file-loader',
                }
            },
            // js兼容
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            // 预设集合
                            presets: ['@babel/preset-env'],
                            // 插件集合
                            plugins: [
                                // 使用其他插件
                            ]
                        }
                    },
                    'eslint-loader'
                ]
            }
        ]
    }
}

本实战使用Webpack构建出了一个简单的单页面后台系统应用，项目几乎覆盖了之前所学习的所有知识。但是该项目还存在许多优化配置的地方，在后面章节中，会对该实战项目做出配置优化。

本章节提供案例源码下载:https://gitee.com/mvc_ydb/webpack-spa-demo.git