精选文章 使用webpack打包多页面

使用webpack打包多页面

作者:朱澎波 时间: 2020-08-05 05:13:52
朱澎波 2020-08-05 05:13:52

webpack一般都是用来打包单页面,但是也有遇到需要打包多页面的时候,

通过网上的教程,略做改动,改成了适合自己项目的配置

这是打包前的目录使用webpack打包多页面1     这是打包后的目录使用webpack打包多页面2

 

在config.js中我主要配置devServer跟插件

const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    mode: "production",
    entry: {},
    devtool: '',
    devServer: {
        port: 9000,
        open: true,
        // clientLogLevel: 'warning',
        stats: "errors-only",
        // overlay: {
        // warnings: true,
        // errors: true
        // },
        proxy: {
            "/": {
                bypass: function (req, res, proxyOptions) {
                    //配置代理
                    if (req.headers.accept.indexOf("html") !== -1) {
                        return '/page' + req.originalUrl;
                    }
                }
            }
        }
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            esModule: true,
                        },
                    },
                    'css-loader',
                ],
            }, {
                test: /\.(png|svg|jpg|gif)$/,
                loader: 'file-loader',
                options: {
                    esModule: false,
                    outputPath: 'img/'
                }
            }, {
                test: /\.(htm|html)$/i,
                loader: 'html-withimg-loader'
            }, {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['latest'] //按照最新的ES6语法规则去转换
                }
            }
        ],
    },
    output: {
        filename: 'js/[name].min.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },
};

webpack.config.js配置多页面入口

const webpackConfig = require('./config');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 获取指定路径下的入口文件
function getEntries(globPath) {
    var files = glob.sync(globPath),
        entries = {};

    files.forEach(function (filepath) {
        if (filepath.match(/\.js$/)) {
            var split = filepath.split('/');
            var fileName = split[split.length - 1];
            var name = '';
            split.forEach((item, index) => {
                if (item !== 'src' && item !== 'view' && index !== split.length - 1) {
                    name = name + item + '/'
                }
            });
            name = name + fileName.substring(0, fileName.length - 3);
            entries[name] = './' + filepath;
        }
    });
    return entries;
}

webpackConfig.entry['api'] = './src/tools/api.js';
webpackConfig.entry['tools'] = './src/tools/index.js';
var entries = getEntries('src/view/**');
Object.keys(entries).forEach(function (name) {
    webpackConfig.entry[name] = entries[name];
    // 每个页面生成一个html
    var plugin = new HtmlWebpackPlugin({
        // 生成出来的html文件名
        filename: 'page/' + name + '.html',

        template: './src/page/' + name + '.html',

        // 自动将引用插入html
        inject: true,
        // 每个html引用的js模块,也可以在这里加上公用模块
        chunks: ['api', 'tools', name,],
        chunksSortMode: function (chunk1, chunk2) {
            var order = ['api', 'tools', name,];
            var order1 = order.indexOf(chunk1);
            var order2 = order.indexOf(chunk2);
            return order1 - order2
        },
        hash: true,
        minify: { // 压缩HTML文件
            removeComments: true, // 移除HTML中的注释
            collapseWhitespace: true, // 删除空白符与换行符
            minifyCSS: true// 压缩内联css
        },
    });
    webpackConfig.plugins.push(plugin);
});

module.exports = webpackConfig;

package.json

  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-latest": "^6.24.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.6.0",
    "file-loader": "^6.0.0",
    "glob": "^7.1.6",
    "html-webpack-plugin": "^4.3.0",
    "html-withimg-loader": "^0.1.16",
    "mini-css-extract-plugin": "^0.9.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:图像处理的方法平移、缩放、扩大(VS2017+Opencv3.4.6)

下一篇:java基础学习笔记(七)-反射--注解

您可能感兴趣

  • 安卓Jar和Aar的区别以及更新UI的几种方式

    Jar包里面只有代码,Aar包里面不止有代码,还有资源,如图片,XML等。对于一些不常变动的Android库文件,建议直接引入AAR,加快编译速度。 2.安卓几种更新UI的方式 1.Activity.runOnUiThread(Runnable); 2.View.post(Runnable),View.postDelay(Runnable,long)(可以理解为在当前视图UI线程添加队列) ...

  • 【计算机网络】第七章:网络安全

    【计算机网络】第七章:网络安全 目录 网络安全问题概述 1.1.计算机网络面临的安全性威胁 1.2.被动攻击和主动攻击 1.3.计算机网络通信安全的目标 1.4.恶意程序(rogue program) 1.5.计算机网络安全的内容 1.6.一般的数据加密模型 两类密码体制 一、对称密钥密码体制 1.1.对称密钥的缺点与优点 1.2.数据加密标准 DES 1.3.DES 的保密性 二、公钥密码...

  • 工作流学习2(书本)

    1、流程引擎的创建。 1.1、ProcessEngineConfiguration的buildProcessEngine方法 使用ProcessEngineConfiguration的create方法可以得到ProcessEngineConfiguration的实例。ProcessEngineConfiguration中提供了一个buildProcessEngine方法,该方法返回一个Pro...

  • grafana使用MYSQL数据源展示

    新增数据源 Grafana支持许多不同的数据源。每个数据源都有一个特定的查询编辑器,该编辑器定制的特性和功能是公开的特定数据来源。 官方支持以下数据源:Graphite,InfluxDB,OpenTSDB,Prometheus,Elasticsearch,CloudWatch和KairosDB。 每个数据源的查询语言和能力都是不同的。 你可以把来自多个数据源的数据组合到一个仪表板dashbo...

  • 我是如何失去团队掌控的?一个技术总监的反思

    我是一个不合格的技术总监,在过去的快三个月里。我带着从40多个人的研发团队(包含需求、开发、测试)里抽调出20多个人去为公司开疆拓土。在这快三个月中,我们一起奋战奋斗拼搏。在过程中,我通宵时间超过半个月,干到凌晨4/5点的日子数不胜数,干到凌晨1/2点日子更是习以为常。整个团队绝大多数人近乎两个月没有周末,辛苦异常,是实实在在的高峰体验。但是三个月后,我带着失败和一身的惨痛教训回到公司。 我...

  • 使用jFeed(jQuery)导入RSS feed

    RSS feed – using jFeed (jQuery) to aggregate RSS This simple tutorial will show you how to Import rss feeds of any site into your own custom area/block of website. It can be used as news imported f...

  • 2020-08-05 ---运维工程师常见面试题整理-----篇章(一)

    一 . Zabbix作用是什么,可以监控什么, 优化有什么,工作原理? Zabbix作用:监控网络主机 监控:硬件(路由器 交换机 防火墙),系统(cpu负荷 ,内存,磁盘,网络,进程,tcp )服务(nginx,php,tomcat,redis,memcache,mysql) web(响应时间,加载时间,渲染时间) 日志(ELK,收集,存储,分析,展示)安全(firewalld) Zabb...

  • 行业软件开发商怎样来抢 BI 这块蛋糕?

    随着企业信息化建设的深入,很多机构的生产系统已建设完成,在保证生产的有序进行后,如何更有效地进行经营决策成了管理者面临的最大任务。商业智能(BI)就是在这种背景成为支撑企业经营分析的一大利器。 根据 IDC 中国的报告,2020 年中国商业智能市场规模将达到 5.8 亿美元(约 40 亿元人民币),而且每年还以近 20% 的速度增长。目前企业对 BI 系统需求旺盛程度可见一斑。 不同于信息化...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。