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

使用webpack打包多页面

作者:朱澎波 时间: 2021-02-05 09:43:15
朱澎波 2021-02-05 09:43:15
【摘要】webpack一般都是用来打包单页面,但是也有遇到需要打包多页面的时候, 
通过网上的教程,略做改动,改成了适合自己项目的配置 
这是打包前的目录     这是打包后的目录 
  
在config.js中我主要配置devServer跟插件 
 
 const path = require('path');
const {CleanWebpackPlugin} = require('clean...

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占位
分享文章到微博
分享文章到朋友圈

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

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

您可能感兴趣

  • Win32汇编教程三 一个简单的对话框 --- 兼谈资源文件的使用

    --------------------------------------------------------------------------------Windows 的资源文件不管在Dos下编程还是在Windows下编程,我们总是要用到除了可执行文件外的很多其他数据,如声音数据,图形数据,文本等等,在Dos下编程,我们可以自己定义这些文件的格式,但这样一来就造成了很多资源共享的问题...

  • Win32汇编教程六 工具栏和状态栏的使用

    --------------------------------------------------------------------------------有关工具栏和状态栏工具栏和状态栏也是Windows标准界面的组成部分,工具栏一般位于菜单栏的下方,上面是一些系统定义的或自己定义的图片,可以通俗地显示这个按钮的作用。状态栏一般位于窗口的最下方,用来显示程序运行中的一些信息。工具栏和状...

  • 使用Rundll32.exe和Rundll.exe

    福州 Pasic 常用Windows9x的朋友一定对Rundll32.exe和Rundll.exe这两个文件不会陌生吧,不过,由于这两个程序的功能原先只限于在微软内部使用,因而真正知道如何使用它们的朋友想必不多。那么好,如果你还不清楚的话,那么就让我来告诉你吧。  首先,请你做个小实验(请事先保存好你正在运行的程序的结果,否则...

  • 系统钩子的使用

    Win32全局钩子在VC5中的实现  ·贺成士   Windows系统是建立在事件驱动的机制上的,说穿了就是整个系统都是通过消息的传递来实现的。而钩子是Windows系统中非常重要的系统接口,用它可以截获并处理送给其他应用程序的消息,来完成普通应用程序难以实现的功能。钩子的种类很多,每种钩子可以截获并处理相应的消息,如键盘钩子可以截获键盘消息,外壳钩子可以截取、启动和关闭应用程序的消息等。...

  • 使用ADO操作SQL SERVER 通过'OLE DB 访问 ACCESS 数据库 ,实现数据交换

    使用的存储过程简介1、sp_addlinkedserver --- 为SQL SERVER 添加一个Link Server2、sp_addlinkedsrvlogin --- 为Link Server 添加一个 Login3、sp_droplinkedsrvlogin --- 删除Link Server的Login4、sp_dropserver  --- 删除Link Server详细请参考...

  • 使用MFC编写internet查询程序

    使用MFC编写internet查询程序 杜经农 在VC++ 5.0中,MFC的WinInet类包装了相关的用于internet 客户机程序编程的win32 API函数。这样,无需了解winsock或TCP/IP的细节就可以编制出internet客户机程序。本文中,我们将探讨如何使用WinInet类来编写一个internet查询程序,该程序起名为“探路者”。该程序能使用各种协议来查询网络,包括...

  • C++ articles:Guru of the Week #3:使用标准库

    作者:Hub Sutter译者:plpliuly /*此文是译者出于自娱翻译的GotW(Guru of the Week)系列文章第3篇,原文的版权是属于Hub Sutter(著名的C++专家,"Exceptional C++"的作者)。此文的翻 译没有征得原作者的同意,只供学习讨论。——译者*/ #3 使用标准库难度:3/10 使用标准库提供的算法比你自己手工写一个要方便的多。仍然以Got...

  • Win2000中Via主板也可以使用DMA了

    由于Win2000不支持Via主板的DMA功能,所以采用Via主板的系统的磁盘性能很低,一直无法启用已能 盘的DMA功能,只能工作在PIO模式。最近情况有了可喜的改变,只要安装了4.29版本以上的Via4in1的主板补丁 ,Win2000中就可以使用硬盘的DMA功能了,而且还可以区分DMA和UDMA,经过测试,磁盘性能明显提高。4.28版 本的Via4in1主板补丁虽然也支持DMA,但是启动...

CSDN

CSDN

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

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

免费套餐,马上领取!
使用webpack打包多页面介绍:华为云为您免费提供使用webpack打包多页面在博客、论坛、帮助中心等栏目的相关文章,同时还可以通过 站内搜索 查询更多使用webpack打包多页面的相关内容。| 移动地址: 使用webpack打包多页面 | 写博客