All Projects → gwuhaolin → Web Webpack Plugin

gwuhaolin / Web Webpack Plugin

alternative for html-webpack-plugin

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Web Webpack Plugin

Webpack Cdn Plugin
A webpack plugin that use externals of CDN urls for production and local node_modules for development
Stars: ✭ 306 (-3.77%)
Mutual labels:  webpack, webpack-plugin
Filemanager Webpack Plugin
Copy, move, archive (zip/tar/tar.gz), delete files and directories before and after Webpack builds. Win32/Mac/*Nix supported
Stars: ✭ 310 (-2.52%)
Mutual labels:  webpack, webpack-plugin
Bundle Buddy Webpack Plugin
🐐🐐🐐🐐 bundle-buddy-webpack-plugin 🐐🐐🐐🐐
Stars: ✭ 199 (-37.42%)
Mutual labels:  webpack, webpack-plugin
Workerize Loader
🏗️ Automatically move a module into a Web Worker (Webpack loader)
Stars: ✭ 2,135 (+571.38%)
Mutual labels:  webpack, webpack-plugin
Webpack Shell Plugin
Run shell commands either before or after webpack builds
Stars: ✭ 250 (-21.38%)
Mutual labels:  webpack, webpack-plugin
Emojify Webpack Plugin
🦄 Turn your code into emoji
Stars: ✭ 178 (-44.03%)
Mutual labels:  webpack, webpack-plugin
Hard Source Webpack Plugin
www.npmjs.com/package/hard-source-webpack-plugin
Stars: ✭ 2,608 (+720.13%)
Mutual labels:  webpack, webpack-plugin
Webpack.js.org
Repository for webpack documentation and more!
Stars: ✭ 2,049 (+544.34%)
Mutual labels:  webpack, webpack-plugin
Webpack Messages
Beautifully format Webpack messages throughout your bundle lifecycle(s)!
Stars: ✭ 238 (-25.16%)
Mutual labels:  webpack, webpack-plugin
Copy Webpack Plugin
Copy files and directories with webpack
Stars: ✭ 2,679 (+742.45%)
Mutual labels:  webpack, webpack-plugin
Html Res Webpack Plugin
plugin for generating html in webpack
Stars: ✭ 170 (-46.54%)
Mutual labels:  webpack, webpack-plugin
Webpack Virtual Modules
Webpack Virtual Modules is a webpack plugin that lets you create, modify, and delete in-memory files in a way that webpack treats them as if they were physically presented in the file system.
Stars: ✭ 286 (-10.06%)
Mutual labels:  webpack, webpack-plugin
React Core Boilerplate
Powerful ASP.NET Core 3 templates with React, true server-side rendering and Docker support
Stars: ✭ 169 (-46.86%)
Mutual labels:  webpack, webpack-plugin
Wxapp Webpack Plugin
📦 微信小程序 webpack 插件
Stars: ✭ 185 (-41.82%)
Mutual labels:  webpack, webpack-plugin
Multipage Webpack Plugin
A plugin that makes handling templates and asset distribution for multi-page applications using webpack trivial
Stars: ✭ 168 (-47.17%)
Mutual labels:  webpack, webpack-plugin
Unused Files Webpack Plugin
Glob all files that are not compiled by webpack under webpack's context
Stars: ✭ 210 (-33.96%)
Mutual labels:  webpack, webpack-plugin
Svg Spritemap Webpack Plugin
SVG spritemap plugin for webpack
Stars: ✭ 160 (-49.69%)
Mutual labels:  webpack, webpack-plugin
Virtual Module Webpack Plugin
Adds the contents of a virtual file to webpack's cached file system without writing it to disk
Stars: ✭ 165 (-48.11%)
Mutual labels:  webpack, webpack-plugin
Critters
🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.
Stars: ✭ 2,894 (+810.06%)
Mutual labels:  webpack, webpack-plugin
Webpack Assets Manifest
This Webpack plugin will generate a JSON file that matches the original filename with the hashed version.
Stars: ✭ 269 (-15.41%)
Mutual labels:  webpack, webpack-plugin

Npm Package Build Status Npm Downloads Dependency Status

web-webpack-plugin

中文文档


想全面学习 Webpack?试试它:

在线阅读全书

A good alternatives for html-webpack-plugin, can make webpack use HTML as entry and handle multi pages.

Install

npm i web-webpack-plugin --save-dev
const { WebPlugin, AutoWebPlugin } = require('web-webpack-plugin');

Feature

output html file demo

webpack config

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<script src="A.js"></script>
<script src="B.js"></script>
</body>
</html>

output directory

├── A.js
├── B.js
└── index.html

use html template demo

webpack config

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <!--load a chunk file config and output in webpack-->
  <script src="B"></script>
  <!--load a local reset style file direct without local var webpack-->
  <link rel="stylesheet" href="./reset.min.css?_inline">
  <!--load a local google analyze file direct without local var webpack-->
  <script src="./google-analyze.js"></script>
</head>
<body>
<!--SCRIPT-->
<footer>web-webpack-plugin</footer>
</body>
</html>
  • use <script src="B"></script> in html template to load required entry, the B in src="B" means entry name config in webpack.config.js
  • comment <!--SCRIPT--> means a inject position ,except for resource load by <script src></script> left required resource config in WebPlugin's requires option. if there has no <!--SCRIPT--> in html template left required script will be inject ad end of body tag.

output html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <!--load a chunk file config and output in webpack-->
  <script src="B.js"></script>
  <!--load a local reset style file direct without local var webpack-->
  <style>body {
    background-color: rebeccapurple;
  }</style>
  <!--load a local google analyze file direct without local var webpack-->
  <script src="google-analyze.js"></script>
</head>
<body>
<script src="A.js"></script>
<footer>web-webpack-plugin</footer>

</body>
</html>

config resource attribute demo

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<![endif] comment

there has two way to config resource attribute:

config in html template

webpack config

module.exports = {
	entry: {
		'ie-polyfill': './ie-polyfill',
		inline: './inline',
		dev: './dev',
		googleAnalytics: './google-analytics',
	},
	plugins: [
		new WebPlugin({
			filename: 'index.html',
			template: './template.html',
		}),
	],
};

html template

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <script src="inline?_inline"></script>
  <script src="ie-polyfill?_ie"></script>
</head>
<body>
<script src="dev?_dev"></script>
<!--load a local google analyze file direct without local var webpack-->
<script async src="./google-analytics.js?_dist"></script>
</body>
</html>

output html file

config in webpack.config.js

webpack config

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

inject attr for HTML tag demo

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 <script src="B.js" crossorigin="anonymous"></script>.

auto detect html entry demo

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

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: `<!DOCTYPE html>....`,

		// {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

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

load css demo

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 Separated css code, the rest of the things to me, I will automatically deal with the same as the above js css

webpack config

// 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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="1">
  <link rel="stylesheet" href="2?_inline">
  <link rel="stylesheet" href="3?_ie">
  <script src="1"></script>
  <!--STYLE-->
</head>
<body>
<script src="2"></script>
<!--SCRIPT-->
<footer>footer</footer>
</body>
</html>

output html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="1.css">
  <style>
  /**2.css**/
  body {
    background-color: rebeccapurple;
  }</style>
  <!--[if IE]>
  <link rel="stylesheet" href="3.css">
  <![endif]-->
  <script src="1.js"></script>
  <link rel="stylesheet" href="4.css">
</head>
<body>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<footer>footer</footer>
</body>
</html>

output directory

├── 1.css
├── 1.js
├── 2.css
├── 2.js
├── 3.css
├── 3.js
├── 4.css
├── 4.js
└── index.html

minify output html demo

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].