请问 autoPlugin 怎么 _inline js about web-webpack-plugin

[gwuhaolin]

在所有页面的公共HTML模版里使用 <script src="./badjs.js?_inline"></script> 就可以实现。
AutoWebPlugin只是为每个寻找到的page生成了一个WebPlugin，资源注入用法和WebPlugin一样。

针对每一个html依赖的资源，有如下属性可以配置：

• _dist 只有在生产环境下才引入该资源
• _dev 只有在开发环境下才引入该资源
• _inline 把该资源的内容潜入到html里
• _ie 只有IE浏览器才需要引入的资源，通过 [if IE]>resource<![endif] 注释实现

相关文档使用html模版
相关demo

[zyg-github]

文档是这样写：
在html模版里通过<script src="B"></script> 引入需要的entry，src="B" 中的B为chunk配置的名称
用了autoPlugin 在html模板里面 我其实不知道chunk配置的名称。。。 怎么加 “ ?_inline ”

[gwuhaolin]

见文档 自动探测html入口

AutoWebPlugin插件找出了./src/目录下所有的目录home login signup:

• 针对这3个目录分别读取目录里的index.js作为入口生成三个chunk home login signup
• 生成三个html文件home.html login.html signup.html
• 在每个生成的html里自动注入了该html所依赖的资源（例如 home.html 会自动注入 home chunk）

[zyg-github]

我需要内联进去呀。。。。
好像没能说到一起 T_T

[gwuhaolin]

对于webpack生成的chunk使用<script src="chunkName?_inline"></script>
对于本地文件使用<script src="./file/to/path.js?_inline"></script>

[zyg-github]

T_T...
我知道在模板里 <script src="chunkName?_inline"></script> 这样写呀
但是根本原因是 chunkName 不知道呀 通过autoPlugin chunkName就不是我手动指定了。。。。

[gwuhaolin]

AutoWebPlugin会为每个页面生成一个chunk，chunk的chunkName等于pageName也就是文件夹的目录名称。这些AutoWebPlugin自动生成的chunk会自动的注入到依赖它的HTML里去你不要人工干预。需要人工干预的是你自己定义的chunk。

[zyg-github]

其实场景是这样的 template.html 只有一个 多个页面都用同一个 但是想把css js 都内联进去
问题是 template.html 如何写
webpack.config.js 内容如下：
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const { AutoWebPlugin } = require('web-webpack-plugin');
const autoprefixer = require('autoprefixer');

const autoPlugin = new AutoWebPlugin(
// the directory hold all pages
'./src/',
{
template: './template.html',
outputPagemap: true
}
);

module.exports = {
entry: autoPlugin.entry(),
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
loaders: [
{
test: /.styl$/,
loader: ExtractTextPlugin.extract({
fallback: 'css-loader',
use: ['postcss-loader','stylus-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin('[name].css'),
autoPlugin
]
};

[gwuhaolin]

页面依赖的css js 都会自动注入进HTML里，但是目前AutoWebPlugin生产的chunk还无法控制其注入属性。
要做到你想要的可以参考这个demo。

[zyg-github]

好的 谢谢~
这样也可以满足~ 有劳了
有么有改进方案 在 template.html 提供变量的形式 这样就省去 ejs

[zyg-github]

templateCompiler 没起作用。。。
webpack.config.js 内容
const path = require('path');
const fs = require('fs');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ejs = require('ejs');
const { AutoWebPlugin } = require('web-webpack-plugin');
const autoprefixer = require('autoprefixer');

const autoPlugin = new AutoWebPlugin(
// the directory hold all pages
'./src/',
{
template: function(pageName){
return './src/'+pageName+'/template.ejs'
},
outputPagemap: true,
templateCompiler: (pageName, templateFullPath) => {
const ejsTemplate = fs.readFileSync(templateFullPath, {
encoding: 'utf8',
});
return ejs.render(ejsTemplate, {
pageName,
});
}
}
);

module.exports = {
entry: autoPlugin.entry(),
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
loaders: [
{
test: /.styl$/,
loader: ExtractTextPlugin.extract({
fallback: 'css-loader',
use: ['postcss-loader','stylus-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin('[name].css'),
autoPlugin
]
};

[gwuhaolin]

请按照最新版本，templateCompiler 发布于 1.8.1。

不同的人喜欢不同的模版引擎，所以提供 templateCompiler 选项让使用者自己选择而不是包含ejs。

[zyg-github]

好的 谢谢
是否考虑直接在template.html 提供变量的形式 这样就省去 ejs

[gwuhaolin]

在模版里提供变量就相当于内置了一个模版引擎。如果还有第二个人有和你一样的需求就认为你这个需求是刚需，我就内置ejs哈。