html-webpack-plugin-custom
Advanced tools
一个基于html-webpack-plugin扩展的插件,实现按照html里面的占位符,和指定的配置,自定义静态资源文件的插入位置。
这是一个基于html-webpack-plugin扩展的webpack插件,为了在webpack打包输出带有静态资源的html的时候实现自定义静态资源的位置。 在原来的html-webpack-plugin是没有办法很好的自定义一个静态资源的位置自定义的,所以通过在html里面编写占位符,通过特定的配置,实现静态资源利用占位符定位位置,从而实现位置的替换。
项目依赖安装:
$ npm install html-webpack-plugin-custom --save-dev
全局安装:
$ npm install html-webpack-plugin-custom -g
async, defer or module attributes to your<script> elements, or even in-line them<link>s to external stylesheets into <style> elements containing internal CSS在test里面有详细的用法demo,已经使用与不使用的比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
{&demo.all.css&}
{&demo.all.js&}
<div id="root"></div>
</body>
</html>
html里面我自定义了一种格式的占位符,{&...&}。
{
plugins: [
new HtmlWebpackPluginCustom({
marks : [
{
fileName : 'html/plugin_demo.html',
markNames_JS : ['demo.all.js'],
markNames_CSS : ['demo.all.css']
}
]
})
]
}
在webpack中直接在plugins里面实例化出来,传入对应的参数。
唯一的参数就是一个对象,对象里面只有唯一一个键值,就是marks对象。 marks是一个数组,里面是针对每个页面的占位符的对象组。
fileName: 该属性就是对应的html-webpack-plugin插件里面的filename。markNames_JS: 该属性是一个数组,里面存放着对应在模板中的占位符中的字符串(js)。markNames_CSS: 该属性是一个数组,里面存放着对应在模板中的占位符中的字符串(css)。完整的webpack.config配置
"use strict";
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginCustom = require('./html-webpack-plugin-custom.js');
const list = require('./HtmlWebpackPluginData.js');
let config = {
devtool: 'source-map',
context: __dirname + '/src',
entry: {
demo: './js/index.js',
// vendors: ['react', 'react-dom', 'es6-promise', 'isomorphic-fetch']//第三方库
},
output: {
path: __dirname + '/dist',
filename: 'js/[name].all.js',
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'stage-0'],
plugins: ['transform-decorators-legacy']
}
},
{
test: /\.handlebars$/,
loader: "handlebars-loader"
},
{
test: /\.css$/,
loader: "style!css!px2rem?remUnit=50&remPrecision=8"
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css!px2rem?remUnit=100&remPrecision=8!sass?outputStyle=expanded')
},
{
test: /\.json$/,
loader: 'json-loader'
},
]
},
plugins: [
new ExtractTextPlugin('css/[name].all.css', {//抽出css
disable: false,
allChunks: true
}),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
}),
new HtmlWebpackPluginCustom({
marks : [
{
fileName : 'html/plugin_demo.html',
markNames_JS : ['demo.all.js'],
markNames_CSS : ['demo.all.css']
}
]
})
]
};
list.map((e,i) => {
let defaultOpt = {
inject:true,
hash:true
};
let data = Object.assign({},defaultOpt,e)
const htmlPlugin = new HtmlWebpackPlugin(data);
config.plugins.push(htmlPlugin);
})
module.exports = config;
HtmlWebpackPluginData.js
module.exports = [
{
filename: `html/normal_demo.html`,
template: `./html/normal_demo.html`,
chunks: ['demo'],
},
{
filename: `html/plugin_demo.html`,
template: `./html/plugin_demo.html`,
chunks: ['demo'],
},
]
FAQs
一个基于html-webpack-plugin扩展的插件,实现按照html里面的占位符,和指定的配置,自定义静态资源文件的插入位置。
The npm package html-webpack-plugin-custom receives a total of 1 weekly downloads. As such, html-webpack-plugin-custom popularity was classified as not popular.
We found that html-webpack-plugin-custom demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bybit's $1.46B hack by North Korea's Lazarus Group pushes 2025 crypto losses to $1.6B in just two months, already surpassing all of 2024's $1.49B total.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.
Security News
Michigan TypeScript founder Dimitri Mitropoulos implements WebAssembly runtime in TypeScript types, enabling Doom to run after processing 177 terabytes of type definitions.