5ar*_*gon 6 html javascript webpack
我希望我根据我的模板html-webpack-plugin生成我html的.ejs模板,该模板也有一些<img>标签.
html-loader可以将我的<img>标签的图像地址更改为一个Webpack,所以我需要它.我指定了这个rules
test: /\.ejs$/,
use: ['html-loader']
但在这禁用的后退"EJS装载机" html-webpack-plugin中提到https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md(无答复中提到)等我<img>标签被正确替换但EJS没有被编译.
如果我删除此规则,EJS已编译但在我的dist文件夹中生成的html <img>标记仍然是指旧名称.
我也尝试过在最后的HTML文件中use: ['html-loader','ejs-compiled-loader']给我一个奇怪的东西module.exports = gibberish(比如它最后一次被调用,但没有.因为Webpack说最后一步需要一个Javascrip或者什么东西......)而且只能use: ['ejs-compiled-loader']工作正常(My EJS编译了)并且use: ['html-loader']只是很好(我的img标签被扫描)
如何获得两者？谢谢.
你不能。
我发现的最简单的方法是一直坚持使用 EJS 模板（即使它很痛苦；））
因此，将模板命名为以 .ejs 结尾的名称。
索引.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebPack Labs 001</title>
</head>
<body>
<h1><%= htmlWebpackPlugin.options.title %></h1>
<img src="<%= require('./img/kolfiber.jpg') %>" alt="">
</body>
</html>
请注意：
<img src="<%= require('./img/kolfiber.jpg') %>" alt="">
这就是使图像起作用的原因。
这是我的插件在 webpack.config.js 中的样子：
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.ejs',
title: 'HTML Webpack Plugin',
})
],
这是输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebPack Labs 001</title>
<link href="/main.a543702ae62bbf007a2ec7ee6fb3571c.css" rel="stylesheet"></head>
<body>
<h1>HTML Webpack Plugin</h1>
<img src="/static/media/images/kolfiber.a3a95779.jpg" alt="">
<script type="text/javascript" src="/main.a713c115b35765d7d4ed.js"></script></body>
</html>
我完整的当前配置（不仅仅是这个例子）：
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const I18nPlugin = require('i18n-webpack-plugin');
const path = require('path');
const languages = {
en: null,
de: require('./src/app/lang/de.json'),
};
module.exports = env => {
console.log(env);
const config = {
entry: './src/app/js/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].[hash].js',
publicPath: '/',
},
module: {
rules: [
{
test: /\.(gif|jpe?g|png|webp)$/,
loader: 'file-loader',
query: {
limit: 8192,
name: 'static/media/images/[name].[hash:8].[ext]',
},
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader',
}),
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader'],
}),
},
{
test: /\.txt$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
],
},
],
},
plugins: [
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
LANGUAGE: languages,
}),
new HtmlWebpackPlugin({
template: 'src/index.ejs',
title: 'HTML Webpack Plugin',
}),
new ExtractTextPlugin({
filename: '[name].[contenthash].css',
disable: process.env.NODE_ENV === 'development',
}),
new I18nPlugin(languages.de, {
failOnMissing: true,
hideMessage: false,
}),
],
};
return config;
};
| 归档时间： |
|
| 查看次数： |
1643 次 |
| 最近记录： |