GithubHelp home page GithubHelp logo

web-webpack-plugin's Issues

如何在ejs模板里加载其它资源，比如图片

模板用的是ejs，需要在模板里面引用图片，如果直接用相对路径，编译后图片会直接复制到根目录，但不会被webpack当作模块来处理，所以文件名也不会改为hash方式，相应loader也不会处理

但html-webpack-plugin貌似可以这样处理
<img src="<% require('./a.png' %>" height="424" width="640" alt="" />

这个插件怎么实现上述的功能呢

如何定义html的输出路径呢？

现在html模板渲染之后是直接放到output的path路径下面，如果我想把html渲染之后的文件放到不同的文件夹下面，有方法配置吗？

多页面场景下怎么忽略入口

在多页面配置下每个页面文件夹下默认是以index.js作为入口模块加载，但一些页面确实是不需要有单独的入口的，比如一个错误页面，本身没有其它逻辑的，只需要注入公共模块就够了，这种情况下是不需要单独入口的，但是如果不加index.js，打包编译时就会报错，如果加一个空的index.js，虽然不报错，但是编译后就会生成那个js文件，虽然只有一行，但是html也会引入进去，怎么解决这个问题呢

关于自定义输出目录

这个插件非常棒，以前都是要结合好几个插件才能实现的功能，这个都综合到一起了。
不过对我这种强迫症的人来说，保持好的输出结构和Url是必需的。
再次感谢你的插件。

你好，请问一下，关于这个插件只能通过js操作DOM去渲染内容到页面，适合于哪些场景的开发?

你好，了解了你写的这个插件，非常的感兴趣，有一个问题想咨询一下你，麻烦你了,首先这个插件目录划分很明细，一个页面一个文件夹，一直是我开发最中意的目录规划，关键是你的插件能够解决 当我新增一个页面时，不用每次就往 entry加一条入口，和new HtmlWebpackPlugin让页面自动插入css和js
可是我想请问一下用这个插件，每个页面的目录下是没有html的 ，所以我所有页面都需要用js操作DOM去渲染页面，比如我开发一个企业官网，每个页面几乎都是不一样的，所以template.html可以说除了头部尾部，没有其它重用代码的地方，然后每个页面都需要用js写html字符串 然后操作DOM插入，这样子很不方便，所以我想知道，这个插件适合于哪些场景的开发，比如上面说的企业官网是否适合于用这个插件呢？

async=""

async tag attribute gets converted to async=""

请问支持多模板吗？

切活动页面通常会有这种需求，每个页面的布局不一样，能为每个页面设置模板吗

calculate relative paths

current code seems to just copy and paste the output filename into the script tag. need some logic added to calculate relative path based on js location and HTML location.

{
    ....
    output: {
        filename: "./js/dist/[name]-[chunkhash].min.js"
    },

    plugins: [
        ....
        new WebPlugin({
            template: 'js/angular/pages/reports/index.html',
            filename: 'org/index.php',
            requires: ['common', 'reports'],
        })
    ]
}

plugin outputs

<script src="js/dist/common-9359363eb6cc11f14a53.min.js"></script>
<script src="js/dist/reports-c55beadeae38133a9cd5.min.js"></script>

should be

<script src="../js/dist/common-9359363eb6cc11f14a53.min.js"></script>
<script src="../js/dist/reports-c55beadeae38133a9cd5.min.js"></script>

output中的filename设置为[name].js?[hash]时替换无效

webpack.config

const path = require("path"),
    resolve = p => path.resolve(__dirname, p);
const { WebPlugin, AutoWebPlugin } = require("web-webpack-plugin");
const config = {
    entry: {
        A: resolve("src/pages/A.js"),
        B: resolve("src/pages/B.js")
    },
    output: {
        path: resolve("dist"),
        filename: "[name].js?[chunkhash]",
        publicPath:'v2/dist/'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    resolve: {},
    plugins: [
        new WebPlugin({
            template:'./template.html',
            filename: "index.html",
            requires: ["A", "B"]
        })
    ]
};
module.exports = config;

template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="B"></script>
    <link rel="stylesheet" href="./reset.min.css?_inline">
    <script src="./test.js"></script>
</head>
<body>
    <!-- SCRIPT -->
</body>
</html>

结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
    <style rel="stylesheet">*{
    margin: 0;
    padding: 0;
    color: green;
}</style>
    <script src="v2/dist/test.js"></script>
</head>
<body>
    <!-- SCRIPT -->

</body>
</html>

希望 AutoWebPlugin 的 pageDir 参数支持回调。

目前只允许传入一个页面文件夹，而 AutoWebPlugin 内部 getDirsInDir 只读取第一层文件夹，这就很难组织灵活的多页面结构。
如果这个参数能像 template 那样有 string | function 两种类型的选择就好了，这样我们就可以传入自定义的页面读取方法：

const autoWebPlugin = new AutoWebPlugin(()=>{ 
        //偶要遍历所有子文件夹 ; 
        //....
        return allPageNames;
},
options);

template 的参数也可能需要对应的调整。

考虑template模版支持被loader处理 

new AutoWebPlugin('./src/pages/', {
      template: './src/assets/template.html',
      commonsChunk: {
        name: 'common',
        minChunks: 2
      },
      outputPagemap: true
}

比如以上，模版内容可以被html相关的loader处理

this code is not run when i configured in vue.config.js，it can cause template.html without complier

// call by webpack
apply(compiler) {
global._isProduction = util.isProduction(compiler);
global._isExtractStyle = util.isExtractStyle(compiler);
const { options: compilerOptions } = compiler;
const { entryMap } = this;
const { outputPagemap, outputPagemapFilename, requires = [], ...otherOptions } = this.options;

	Object.keys(entryMap).forEach((pageName) => {
		// ensure entryMap from pages has been add to webpack entry
		// webpack-dev-server may modify compilerOptions.entry, e.g add webpack-dev-server/client to every entry
		compilerOptions.entry = Object.assign(
			this.webpackEntry,
			compilerOptions.entry,
		);

		// add an WebPlugin for every page to output an html
		const {
			templatePath,
			templateCompiler,
			htmlOutputFilename,
			entryPath,
		} = entryMap[pageName];
		new WebPlugin({
			...otherOptions,
			template: templatePath,
			templateCompiler,
			pageName,
			entryPath,
			filename: `${htmlOutputFilename}.html`,
			requires: requires.concat(pageName),
		}).apply(compiler);
	});

希望支持includePages属性

首先表示看到这个插件，很强大，很符合我们的使用场景
再者我提一个小功能，
假如很多模块，指向配置打包二个模块的话，我只配置

const includeList = ['index','home'];
includePages:includeList,
includePages:(pageNaem) =>includeList.include(pageNaem),

或者IgnorePages支持函数

ignorePages:(pageNaem) => !includeList.include(pageNaem)

和loader一样的机制exclude/include
同时存在的时候，选择只是用一个或者按优先级

希望作者大大能够支持，尽快发布一下，谢谢了，需要我帮忙new request一个吗

有个多入口多出口的问题想请教一下 

src
  - A
    - a
      -index.js
  - B
    - b
      - index.js
template.html

假设我的目录结构是这样的，导到 dist 中的 html 与 index.js 同级，应该怎么做呢？

AutoWebPlugin 的首参是单目录的，只用在 A 上可行。
看了源码是希望我将 { 'src/A/a': true, 'src/B/b': true } 作为首参传进去吗。

webpack4.6.0, 版本异常， 无法合并html

(node:7068) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
throw new Error("Chunk.parents: Use ChunkGroup.add/removeParent() instead");
Error: Chunk.parents: Use ChunkGroup.add/removeParent() instead

JS 注入标签自定义

目前 JS 注入的标签是寻找 <!--SCRIPT-->，但其实用 prettoer 格式化之后会变成 <!-- SCRIPT -->，这也更加规范。

AutoWebPlugin 中没有 commonsChunk 选项？

问题

在看书进行到多页管理配置时，commonsChunk 提取公用代码无效，源代码似乎没有这个选项

Webpack4 下使用 splitChunks 不知道如何提取公用代码

使用自定义filename输出html文件时，html内引入的资源路径出错

webpack配置
publichPath: '//7.url.cn/edu/user/'

插件配置

filename: (n) => `${n}/${n}`

Resource.js

                // add a file to newNodes
		const outToNewNodes = (fileName, fileContent) => {
			// resource should load in URL relative to html output path
			let resourceRelative2HTMLPath = url.resolve(webpackOutputPublicPath, fileName);
			resourceRelative2HTMLPath = util.urlRelative(htmlOutputURL, resourceRelative2HTMLPath);
			resourceRelative2HTMLPath = url.resolve(webpackOutputPublicPath, resourceRelative2HTMLPath);

			if (type === 'script') {
				// output js file only
				...
			} else if (type === 'style') {
				// output css file only
				...
			} else if (type === 'other') {
				...
			}
		};

此类情况当执行到上面Resource.js文件的outToNewNodes方法时，resourceRelative2HTMLPath最终计算出资源文件的路径为//7.url.cn/edu/[name]，故html加载资源的路径出错。

注释掉这两行代码后，跑通

// resourceRelative2HTMLPath = util.urlRelative(htmlOutputURL, resourceRelative2HTMLPath);
// resourceRelative2HTMLPath = url.resolve(webpackOutputPublicPath, resourceRelative2HTMLPath);

html模版中使用_inline内联script时，让webpack loader处理文件内容？ 

const fileContent = fs.readFileSync(filePath, {
  encoding: ['script', 'style'].indexOf(this.type) >= 0 ? 'utf8' : undefined
});

// 从文件的路径中解析出文件的名称
const filename = util.getFilenameByFilePath(filePath);

// 对于非inline的资源需要输出
if (!resourceAttr.inline) {
// 通过webpack把本地文件输出
  util.addFileToWebpackOutput(compilation, filename, fileContent);
}

// 添加文件名称和内容到新节点 以供输出到HTML文档
outToNewNodes(filename, fileContent);

目前fileContent是直接读取的

JS 注入标签自定义

目前 JS 注入的标签是寻找 <!--SCRIPT-->，但其实用 prettier 格式化之后会变成 <!-- SCRIPT -->，这也更加规范。

期望能够自定义注入的标签，或者兼容 <!-- SCRIPT --> 这种写法。

.pug support

Hello! Thank you for the plugin. Could you tell me, perhaps whether I use pug-templates?

is there a way I can define a template without body,html tags?

I have a template

#{extends 'main.html'/}

<div id="root"></div>

#{set 'reactScripts'}
<!--SCRIPT-->
#{/set}

so I'd like to have output.html

#{extends 'main.html'/}

<div id="root"></div>

#{set 'reactScripts'}
<script src="polyfills.ba39d5cf24f6f736654b.esm.js"></script>
<script src="main.af33690fade9e8d661fc.esm.js"></script>
#{/set}

without html/head/body wrapper tags.

Is it possible?

TypeError: Cannot set property 'webPluginBeforeEmitHTML' of undefined

[email protected] build D:\app\social-h5\mall-master
node build/build.js

D:\app\social-h5\mall-master\node_modules_web-webpack-plugin@4.6.7@web-webpack-plugin\lib\WebPlugin.js:99
compiler.hooks.webPluginBeforeEmitHTML = new SyncHook(['htmlDocument']);
^

TypeError: Cannot set property 'webPluginBeforeEmitHTML' of undefined
at WebPlugin.apply (D:\app\social-h5\mall-master\node_modules_web-webpack-plugin@4.6.7@web-webpack-plugin\lib\WebPlugin.js:99:42)
at Object.keys.forEach (D:\app\social-h5\mall-master\node_modules_web-webpack-plugin@4.6.7@web-webpack-plugin\lib\AutoWebPlugin.js:179:7)
at Array.forEach ()
at AutoWebPlugin.apply (D:\app\social-h5\mall-master\node_modules_web-webpack-plugin@4.6.7@web-webpack-plugin\lib\AutoWebPlugin.js:156:25)
at Compiler.apply (D:\app\social-h5\mall-master\node_modules_tapable@0.2.9@tapable\lib\Tapable.js:375:16)
at webpack (D:\app\social-h5\mall-master\node_modules_webpack@2.7.0@webpack\lib\webpack.js:32:19)
at Object. (D:\app\social-h5\mall-master\build\build.js:24:1)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

Allow adding to current entry

The plugin overwrite the current entry instead of adding to it.
What about if the user has other objects instead of only html files and want all?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.