webplugin软件怎么打开

发布网友发布时间：2022-04-25 10:19

共1个回答

热心网友时间：2022-04-27 20:44

摘要AutoWebPlugin 可以找到一个目录下所有的页面入口，自动为所有的页面入口配置一个WebPlugin输出对应的 html。即AutoWebPlugin支持所有WebPlugin支持的功能。安装npm i web-webpack-plugin --save-devconst { AutoWebPlugin } = require('web-webpack-plugin');1212使用假设目前需要两个页面，index.html和login.html页面。接下来使用AutoWebPlugin这个插件自动生成这个两个页面。要想使用这个插件，就必须遵守其规定。这个插件强制性规定了目录结构：1、我们必须将所有的单页应用都放在一个目录下。这里我们放在pages目录下。2、一个单页应用对应一个单独的文件夹。3、每个单页应用下都有一个index.js文件作为入口文件[注意]：AutoWebPlugin最终生成的两个HTML文件，会根据每个单页应用对应的文件夹名称来命名。所以这个例子中，最终生成的HTML文件就是：index.html和login.html。修改webpack.config.js配置文件const path = require('path');const { AutoWebPlugin } = require('web-webpack-plugin');const MiniCssExtractPlugin = require('mini-css-extract-plugin');// 使用AutoWebPlugin自动寻找pages目录下的所有目录，将每一个目录看成一个单页应用const autoWebPlugin = new AutoWebPlugin('pages', { template: './template.html', // HTML模板文件所在的文件路径 postEntrys:['./common.css'],// 所有的页面都依赖的共用的css样式文件 // 提取所有页面的公共代码 commonsChunk: { name: 'common'// 提取出公共代码的Chunk名称 }});mole.exports = { 咨询记录 · 回答于2021-09-29webplugin软件怎么打开AutoWebPlugin 可以找到一个目录下所有的页面入口，自动为所有的页面入口配置一个WebPlugin输出对应的 html。即AutoWebPlugin支持所有WebPlugin支持的功能。安装npm i web-webpack-plugin --save-devconst { AutoWebPlugin } = require('web-webpack-plugin');1212使用假设目前需要两个页面，index.html和login.html页面。接下来使用AutoWebPlugin这个插件自动生成这个两个页面。要想使用这个插件，就必须遵守其规定。这个插件强制性规定了目录结构：1、我们必须将所有的单页应用都放在一个目录下。这里我们放在pages目录下。2、一个单页应用对应一个单独的文件夹。3、每个单页应用下都有一个index.js文件作为入口文件[注意]：AutoWebPlugin最终生成的两个HTML文件，会根据每个单页应用对应的文件夹名称来命名。所以这个例子中，最终生成的HTML文件就是：index.html和login.html。修改webpack.config.js配置文件const path = require('path');const { AutoWebPlugin } = require('web-webpack-plugin');const MiniCssExtractPlugin = require('mini-css-extract-plugin');// 使用AutoWebPlugin自动寻找pages目录下的所有目录，将每一个目录看成一个单页应用const autoWebPlugin = new AutoWebPlugin('pages', { template: './template.html', // HTML模板文件所在的文件路径 postEntrys:['./common.css'],// 所有的页面都依赖的共用的css样式文件 // 提取所有页面的公共代码 commonsChunk: { name: 'common'// 提取出公共代码的Chunk名称 }});mole.exports = {