Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gwuhaolin/web-webpack-plugin
alternative for html-webpack-plugin
https://github.com/gwuhaolin/web-webpack-plugin
html html-template webpack webpack-plugin
Last synced: 5 days ago
JSON representation
alternative for html-webpack-plugin
- Host: GitHub
- URL: https://github.com/gwuhaolin/web-webpack-plugin
- Owner: gwuhaolin
- Created: 2016-10-07T05:06:15.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-06-25T07:21:41.000Z (over 1 year ago)
- Last Synced: 2024-04-24T21:43:59.840Z (6 months ago)
- Topics: html, html-template, webpack, webpack-plugin
- Language: JavaScript
- Homepage:
- Size: 847 KB
- Stars: 327
- Watchers: 14
- Forks: 43
- Open Issues: 14
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
- awesome-github-star - web-webpack-plugin - webpack-plugin | gwuhaolin | 327 | (JavaScript)
README
[](https://www.npmjs.com/package/web-webpack-plugin)
[](https://travis-ci.org/gwuhaolin/web-webpack-plugin)
[](https://www.npmjs.com/package/web-webpack-plugin)
[](https://npmjs.org/package/web-webpack-plugin)
# web-webpack-plugin
### [中文文档](https://github.com/gwuhaolin/web-webpack-plugin/blob/master/readme_zh.md)
---
想全面学习 Webpack？试试它：
## [在线阅读全书](http://webpack.wuhaolin.cn/)
A good alternatives for [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin), can make webpack use HTML as entry and handle multi pages.
# Install
```bash
npm i web-webpack-plugin --save-dev
```
```js
const { WebPlugin, AutoWebPlugin } = require('web-webpack-plugin');
```
# Feature
## output html file [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/out-html)
**webpack config**
```js
module.exports = {
entry: {
A: './a',
B: './b',
},
plugins: [
new WebPlugin({
// file name or full path for output file, required.
// pay attention not to duplication of name,as is will cover other file
filename: 'index.html',
// this html's requires entry,must be an array.dependent resource will inject into html use the order entry in array.
requires: ['A', 'B'],
}),
],
};
```
will output an file named `index.html`,this file will auto load js file generated by webpack form entry `A` and `B`,the out html as below:
**output html**
```html
```
**output directory**
```
├── A.js
├── B.js
└── index.html
```
## use html template [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template)
**webpack config**
```js
module.exports = {
entry: {
A: './a',
B: './b',
},
plugins: [
new WebPlugin({
filename: 'index.html',
// html template file path（full path relative to webpack.config.js）
template: './template.html',
requires: ['A', 'B'],
}),
],
};
```
**html template**
```html
web-webpack-plugin
```
* use `` in html template to load required entry, the `B` in `src="B"` means entry name config in `webpack.config.js`
* comment `` means a inject position ,except for resource load by `` left required resource config in `WebPlugin's requires option`. if there has no `` in html template left required script will be inject ad end of `body` tag.
**output html**
```html
body {
background-color: rebeccapurple;
}
web-webpack-plugin
```
## config resource attribute [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/config-resource)
every resource required by html,it can config some attribute as below:
* `_dist` only load in production environment
* `_dev` only load in dev environment
* `_inline` inline resource content info html,inline script and css
* `_ie` resource only required IE browser,to achieve by `[if IE]>resource
```
[output html file](https://github.com/gwuhaolin/web-webpack-plugin/blob/master/demo/config-resource/dist-template/index.html)
### config in `webpack.config.js`
**webpack config**
```js
module.exports = {
plugins: [
new WebPlugin({
filename: 'index.html',
requires: {
'ie-polyfill': {
_ie: true,
},
inline: {
_inline: true,
_dist: true,
},
dev: {
_dev: true,
},
//load a local google analyze file direct without local var webpack
'./google-analytics.js': {
_dist: true,
},
},
}),
],
};
```
[output html file](https://github.com/gwuhaolin/web-webpack-plugin/blob/master/demo/config-resource/dist-js/index.html)
### inject attr for HTML tag [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/config-html-attribute)
other attribute in config without name start with **\_** will be treat as attribute for HTML tag in output HTML file. e.g if a script resource with query `?crossorigin=anonymous` will lead to output HTML be ``.
## auto detect html entry [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/auto-plugin)
`AutoWebPlugin` plugin can find all page entry in an directory, then auto config an `WebPlugin` for every page to output an html file, you can use it as below:
**webpack config**
```js
const autoPlugin = new AutoWebPlugin(
// the directory hold all pages
'./src/pages',
{
// all props below is not required
// {string,function}
// the template file path used by all pages
// if typeof template ===string: template config is html template file full path
// if typeof template ===function: template config is function(pageName)=>newFullPath ,ask user for detail
template: './src/template.html',
// { function(pageName,templateFullPath)=>htmlString }
// if provide AutoWebPlugin will use Compiler to compile org template file to html content before used it in WebPlugin
templateCompiler: (pageName, templateFullPath) => '',
// {string,function}
// get WebPlugin template's string content, high priority than template
// typeof===string: template config is html template file string content
// typeof===function: template config is function,ask user for detail
templateContent: `....`,
// {string,function}
// javascript main file for current page,if it is null will use index.js in current page directory as main file
// typeof entry===string: entry config is entry file full path
// typeof entry===function: entry config is function(pageName)=>newFullPath ,ask user for detail
entry: null,
// {function}
// get WebPlugin output filename,default filename is pageName
// set filename as function(pageName)=>filename to add custom logic
filename: null,
// {Array} pre append to all page's entry
preEntrys: ['./path/to/file1.js'],
// {Array} post append to all page's entry
postEntrys: ['./path/to/file2.js'],
// {string} publicPath for css file,for js file will use webpack.publicPath
stylePublicPath: null,
// page name list will not ignore by AutoWebPlugin(Not output html file for this page name)
ignorePages: ['pageName'],
// whether output a pagemap.json file which contain all pages has been resolved with AutoWebPlugin in this way:
// {"page name": "page url",}
outputPagemap: true,
}
);
module.exports = {
// AutoWebPlugin will generate a entry for every page find in the directory hold all pages
// autoPlugin.entry({}) used to pass entrys find by AutoWebPlugin to webpack config
entry: autoPlugin.entry({
youAdditionalEntryName: 'you additional entry path',
}),
};
```
**src directory**
```
── src
│ ├── home
│ │ └── index.js
│ ├── ie_polyfill.js
│ ├── login
│ │ └── index.js
│ ├── polyfill.js
│ ├── signup
│ │ └── index.js
│ └── template.html
```
**output directory**
```
├── dist
│ ├── common.js
│ ├── home.html
│ ├── home.js
│ ├── ie_polyfill.js
│ ├── login.html
│ ├── login.js
│ ├── polyfill.js
│ ├── signup.html
│ └── signup.js
```
`AutoWebPlugin` find all page `home login signup` directory in `./src/`,for this three page `home login signup`:
* will use `index.js` as main file add three chunk `home login signup`
* output three html file `home.html login.html signup.html`
* auto inject resource required by ever page. e.g(inject home chunk to home.html)
AutoWebPlugin find all page `home login signup` in dir `./src/` then:
* use index.js as entry for every page to make a chunk named `chunk home login signup`
* output html files for every page `home.html login.html signup.html`
* auto inject resource required by every page（e.g home.html will inject home chunk）
### ignorePages attribute
`ignorePages` page name list will not ignore by AutoWebPlugin(Not output html file for this page name),type is array of string.
### template attribute
`template` if template is a string , i will regard it as file path for html template（full path relative to webpack.config.js）
In the complex case,You can set the template to a function, as follows using the current page directory index.html file as the current page template file
**webpack config**
```js
new AutoWebPlugin('./src/', {
// Template files used by all pages
template: (pageName) => {
return path.resolve('./src', pageName, 'index.html');
},
});
```
### entry attribute
The entry property is similar to template, and also supports callback functions for complex situations. But if the entry is empty to use the current page directory `index.jsx?` As the entrance
## config publicPath [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/public-path)
## load css [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/extract-css)
The resource for each entry may contain css code.
If you want to extract the css code to load alone rather than sneaking into the js where you need to load
[extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin)
Separated css code, the rest of the things to me, I will automatically deal with the same as the above js css
**webpack config**
```js
// webpack.config.js
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: 'css-loader',
}),
},
],
},
entry: {
1: './1',
2: './2',
3: './3',
4: './4',
},
plugins: [
new ExtractTextPlugin('[name].css'),
new WebPlugin({
filename: 'index.html',
template: './template.html',
requires: ['1', '2', '3', '4'],
}),
],
};
```
**html template**
```html
footer
```
**output html**
```html
/**2.css**/
body {
background-color: rebeccapurple;
}
footer
```
**output directory**
```
├── 1.css
├── 1.js
├── 2.css
├── 2.js
├── 3.css
├── 3.js
├── 4.css
├── 4.js
└── index.html
```
## minify output html [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/minify-html)
`WebPlugin` and `AutoWebPlugin` support `htmlMinify` options to minify output html use the following rules:
* if `htmlMinify` is set - if `htmlMinify` is `true`, builtin html minify function will used to minify output html(minify HTML only，not CSS or JS) - if `htmlMinify` is `false`, builtin html pretty function will used to output human read friendly html - if `htmlMinify` is a `function`,use this function `function(orgHTMLString)=>minifyHTMLString` to minify html
* if `htmlMinify` is missing(`undefined`) - if environment is `production`, builtin html minify function will used to minify output html(minify HTML only，not CSS or JS)
* if environment is not `production`, builtin html pretty function will used to output human read friendly html
# Distinguish the environment
This plugin takes into account both **development** environment and **production** environment. And only if `process.env.NODE_ENV = production` current environment is **production** environment, others are considered to be development environment.
`webpack -p` will use DefinePlugin define `NODE_ENV=production`。
# In practice
* [redemo](https://github.com/gwuhaolin/redemo) elegant react demo component
* [stickylist](https://github.com/gwuhaolin/stickylist) react sticky header listview component
* [resume](https://github.com/gwuhaolin/resume) my resume
* [remd](https://github.com/gwuhaolin/remd) fast react markdown component
* [use template compiler to pre-translate template](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template-complier)
* [webpack 原理与实战](https://github.com/gwuhaolin/blog/issues/4)
* [webpack2 终极优化](https://github.com/gwuhaolin/blog/issues/2)
* [使用模版引擎预处理模版](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template-complier)
* [使用 HTML 模版配置资源注入到 HTML](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template)
* [给 HTML 标签注入属性](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/config-html-attribute)
* [在 webpack 里直接通过 JS 配置资源注入到 HTML](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/config-resource)
* [管理多个单页应用](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/auto-plugin)
* [从 JS 中提取出 CSS](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/extract-css)
* [直接注入本地文件](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/load-local-file)
* [设置 PublicPath](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/public-path)
* [编辑 HTML 模版时，监听模式下会自动编译和刷新](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/watch-template)