1.3.5 • Published 7 years ago
scripttext-webpack-plugin v1.3.5
ScriptText Webpack Plugin
Webpack插件,用来自动生成script标签
应用场景:在html文件中自动添加webpack打包后的script引用
使用说明
安装
npm install scripttext-webpack-plugin --save-dev
基本使用
该插件会自动将位置标记替换为引用目标chunk的script标签
var path = require('path');
var ScriptTextPlugin = require('scripttext-webpack-plugin');
module.exports = {
entry: {
page1: './src/page1/js/index.js'
},
output: {
filename: '[name]/js/index.[chunkhash:10].js',
path: path.resolve(__dirname, './dist')
},
plugins: [
new ScriptTextPlugin(option)
]
};
option
插件配置对象
{
default: {}, //默认选项
config: [configItems] //config数组
}
default
默认配置,与configItem对应,基于deep assign
/*configItem*/
{
source: {
filename: 'index.html',
}
}
/*default*/
{
pageName: 'index1',
source: {
path: p2
}
}
/*result configItem*/
{
pageName: 'index1',
source: {
filename: 'index.html',
path: p2
}
}
configItem
option.config数组项
configItem各属性含义
- source:用来配置源文件的名称及路径
- output: 用来配置生成后的文件及路径
- pageName: 用来设置pageName代表的字符串
- chunks: 配置引用的各个chunk
- script: 插入生成的script的相关规则
{
pageName: 'page1', //页面名称,在所有的path和filename中可以用[pageName]代替
source: {},
output: {},
chunks: [chunk],
script: {}
}
pageName
用来设置pageName代表的字符串
有效范围
source.filename source.path
output.filename output.path
chunk.path
source
用来配置源文件的名称及路径,路径为绝对路径
{
filename: 'index.html',
path: path.resolve(__dirname, './src/[pageName]/')
}
output
用来配置生成后的文件及路径,绝对路径
{
filename: 'index.html',
path: path.resolve(__dirname, './dist/[pageName]/')
}
chunk
配置要生成script标签的chunk,其中path会原样输出
{
name: 'page1', //entry配置中的chunkName
path: './[pageName]/js' //生成的script中路径
}
script
插入生成的script的相关规则
{
positionFlag: '!!!{{{webpack-chunks}}}' //位置标记
}
例子
源文件
<!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>
</head>
<body>
<!--positionFlag默认为{{{webpack-chunks}}},如果没有该标志默认插在</body>之前,如果没有</body>标签则插在文件末尾-->
</body>
</html>
webpack.config.js
var path = require('path');
var ScriptTextPlugin = require('scripttext-webpack-plugin');
module.exports = {
entry: {
chunk1: './src/js/chunk1.js'
chunk2: './src/js/chunk2.js'
},
output: {
filename: '[name].[chunkhash:10].js',
path: path.resolve(__dirname, './dist')
},
plugins: [
new ScriptTextPlugin({
default: ...,
config: [
{
pageName: 'page1',
chunks: [
{name: 'chunk1', path: './[pageName]/js'},
{name: 'chunk2', path: './[pageName]/js'}
]
}
]
})
]
};
生成的文件
<!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>
</head>
<body>
<script src="page1\js\chunk1.947b04c5d3.js"></script>
<script src="page1\js\chunk2.a7213u22d3.js"></script>
</body>
</html>