webpack4:多页面及分离第三方库和公用文件配置

本篇开始学习webpack打包的构建配置,所用版本为webpack 4.16.1webpack-cli 3.2.3

由于主要开发电商项目,所以对webpack配置生成多页面html更感兴趣。

配置生成html的插件采用html-webpack-plugin,主要作用是:根据模板生成页面/无模板生成页面、自动引入js等外部资源、设置title/meta等标签内容。

还是从最简单的单入口配置开始,安装相应包的过程略,直接给出webpack.config.js配置:

const path = require( "path" );
const HtmlWebpackPlugin = require( "html-webpack-plugin" );
const CleanWebackPlugin = require( "clean-webpack-plugin" );

module.exports = {
    entry: {
        app: __dirname + "/src/index.js"
    },
    output: {
        filename: "[name].[chunkhash].bundle.js",
        path: path.resolve( __dirname, "dist" )
    },
    devtool: "inline-source-map",
    mode: "development",
    module: {
        rules:[

        ]
    },
    plugins: [
        new HtmlWebpackPlugin( {
            title: "开发测试页面"
        } ),
        new CleanWebackPlugin( ["dist"] )
    ],
}

接下来是多入口页面配置。

多页面演示模型如下:

webpack.config.js配置如下:

const path = require( "path" );
const webpack = require( 'webpack' );
const HtmlWebpackPlugin = require( "html-webpack-plugin" );
const CleanWebpackPlugin = require( "clean-webpack-plugin" );

module.exports = {
    entry: {
        main: __dirname + "/src/js/main.js",
        about: __dirname + "/src/js/about.js",
        list: __dirname + "/src/js/list.js"
    },
    output: {
        filename: "js/[name].[chunkhash].bundle.js",
        path: path.resolve( __dirname, "dist" )
    },
    devtool: "inline-source-map",
    module: {
        rules: [

        ]
    },
    plugins: [
        new HtmlWebpackPlugin( {
            // html文件 title标签的内容
            title: "main",      
            // 输出的文件名,可配置路径
            filename: "views/main.html",   
            // 采用的模板文件名,可配置路径  
            template: "src/views/main.html",   
            // 生成的html文件中引入的js文件名,与entry入口和slpitChunks分离等配置的js文件名相同
            chunks: [ "main", "manifest", "vendors", "common" ]     
        } ),
        new HtmlWebpackPlugin( {
            title: "about",
            filename: "views/about.html",
            template: "src/views/about.html",
            chunks: [ "about", "manifest", "vendors", "common" ]
        } ),
        new HtmlWebpackPlugin( {
            title: "list",
            filename: "views/list.html",
            template: "src/views/list.html",
            chunks: [ "list", "manifest", "vendors", "common" ]
        } ),
        new webpack.ProvidePlugin( {
            // npm i jquery -S 安装jquery,然后利用ProvidePlugin这个webpack内置API将jquery设置为全局引入,从而无需单个页面import引入
            $: "jquery"
        } ),
        new CleanWebpackPlugin( ["dist"] )
    ],
    // 提取公共模块,包括第三方库和自定义工具库等
    optimization: {
        // 找到chunk中共享的模块,取出来生成单独的chunk
        splitChunks: {
            chunks: "all",  // async表示抽取异步模块,all表示对所有模块生效,initial表示对同步模块生效
            cacheGroups: {
                vendors: {  // 抽离第三方插件
                    test: /[\\/]node_modules[\\/]/,     // 指定是node_modules下的第三方包
                    name: "vendors",
                    priority: -10                       // 抽取优先级
                },
                utilCommon: {   // 抽离自定义工具库
                    name: "common",
                    minSize: 0,     // 将引用模块分离成新代码文件的最小体积
                    minChunks: 2,   // 表示将引用模块如不同文件引用了多少次,才能分离生成新chunk
                    priority: -20
                }
            }
        },
        // 为 webpack 运行时代码创建单独的chunk
        runtimeChunk:{
            name:'manifest'
        }
    }
}

多页面多入口场景中,使用以上配置可以正常打包。

上例加上JQuery这个第三方库,为方便各页面引用,利用webpack内置API中的ProvidePlugin对象将jquery设置成全局对象以供使用,无需在各页面import了。

另外也多处引用有一个util.js的自定义工具库。

上例通过optimization.splitChunks配置将第三方库分离打包到vendors.js文件中,将自定义工具库util.js分离打包到common.js文件中。

如下是多入口项目完整目录截图,dist目录为打包后目录:

本篇实现单入口/多入口打包功能。采用html生成插件为html-webpack-plugin。分离共用模板插件为SplitChunksPlugin

参考资料:

1. webpack中文文档 https://www.webpackjs.com/concepts/ 2. webpack4.0各个击破(1)—— html部分 https://www.cnblogs.com/dashnowords/p/9478777.html

本文分享自微信公众号 - 前端小二(frontendxiao2)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-02-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券