webpack4 不编译所有 html 文件? [英] webpack4 does not compile all html files?
问题描述
我最初没有正确理解问题的本质，我纠正问题，以便更准确地表述问题......
有这样一个程序集webpack:
'use strict';const webpack = require('webpack');const path = require('path');const UglifyJsPlugin = require("uglifyjs-webpack-plugin");const MiniCssExtractPlugin = require("mini-css-extract-plugin");const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");const HtmlWebpackPlugin = require('html-webpack-plugin');const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');常量最小化块 = {最小化:[新的 UglifyJsPlugin({丑化选项:{警告:错误，解析:{}，压缩:{}，mangle:真的，输出:空，顶层:假，名称缓存:空，ie8:假，keep_fnames:假，},}),新的 OptimizeCSSAssetsPlugin({})]}常量配置 = {入口: {主要:'./frontend/src/index.js'},输出: {路径:path.resolve(__dirname, './public'),文件名:'main.js'},开发服务器:{contentBase: path.join(__dirname, 'public'),端口:8888，叠加:真实，代理: {'/api': 'http://localhost:8889'}},模块: {规则:[{测试:/\.js$/,排除:/node_modules/，用: {loader: "babel-loader"}},{测试:/\.less$/,使用: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]},{测试:/\.scss$/,使用: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]},{测试:/\.sass$/,使用: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]},//{ test:/\.(ttf|eot|woff|woff2|png|jpg|jpeg|svg|gif|webp)$/, loader: 'url-loader', },{测试:/\.(png|jpg|jpeg|svg|gif|webp)$/,包括: [path.resolve(__dirname, './frontend/binary/image/')],用: [{加载器:'文件加载器'，选项: {name: '图像/[名称].[ext]',}}]},{测试:/\.(eot|svg|ttf|woff|woff2)$/,包括: [path.resolve(__dirname, './frontend/binary/fonts/')],用: [{加载器:'文件加载器'，选项: {name: '字体/[名称].[ext]',}}]},{测试:/\.(mp3)$/,包括: [path.resolve(__dirname, './frontend/binary/audio/')],用: [{加载器:'文件加载器'，选项: {name: '音频/[名称].[分机]',}}]},{测试:/\.(html)$/,包括: [path.resolve(__dirname, './frontend/pages/')],用: [{加载器:'文件加载器'，选项: {name: '[path][name].[ext]',}}]},]},插件: [新的 MiniCssExtractPlugin({文件名:'./index.css',}),新的 HtmlWebpackPlugin({模板:path.resolve(__dirname, 'frontend/src/', 'template.html'),文件名:'index.html',favicon: '前端/二进制/图像/图标/iconfinder_tech_0001_4023871.png',}),]};module.exports = (env, options) =>{让生产 = options.mode == '生产';config.devtool = 生产?false : 'inline-cheap-module-source-map';config.optimization = 生产?最小化块:{}；返回配置；}有一个`src文件夹--template.html文件，里面有这样一段布局
<img src="${require(`../binary/image/icons/iconfinder_tech_0001_4023871.png`)}" alt=""/>编译后webpack
转生到index.html中的public文件夹，得到这个结果
<img src="images/iconfinder_tech_0001_4023871.png" alt=""/>它有效.
同时src有一个文件夹pages，里面有不同的页面，里面有相同的排版
<img src="${require(`../../../../binary/image/sheelak/0viber-image.jpg`)}" alt=""/></标题> 并在运行 webpack 后创建一个包含这些文件的文件夹，这是结果
<img src="${require(`../../../../binary/image/sheelak/0viber-image.jpg`)}" alt=""/></标题> 然后require forimg的问题，在header中不起作用
出现错误.
告诉我我的 webpack 有什么问题?
您应该使用 html-loader 并启用 interpolate 标志:
<代码> {测试:/\.(html)$/,包括: [path.resolve(__dirname, './frontend/pages/')],用: [{加载器:'文件加载器'},{装载机:'提取装载机'},{loader: 'html-loader',选项: {插值:真，}}],排除: [path.resolve(__dirname, 'frontend/src/', 'template.html')]}我创建了 pr 来解决您的问题:https://github.com/sarnor/俱乐部/拉/1.
还请注意，当您只编写如下图像源时，插值很丑陋:<img src="../../image/icons/iconfinder_tech_0001_4023871.png".
还要注意您的相对 url 指向错误的目录，您的 url 中缺少 ../.
I initially did not correctly understand the essence of the problem, I correct the question, so as to more accurately formulate the problem ...
There is such an assembly webpack:
'use strict';
const webpack = require('webpack');
const path = require('path');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const minimizerBlock = {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
warnings: false,
parse: {},
compress: {},
mangle: true,
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_fnames: false,
},
}),
new OptimizeCSSAssetsPlugin({})
]
}
const config = {
entry: {
main: './frontend/src/index.js'
},
output: {
path: path.resolve(__dirname, './public'),
filename: 'main.js'
},
devServer: {
contentBase: path.join(__dirname, 'public'),
port: 8888,
overlay: true,
proxy: {
'/api': 'http://localhost:8889'
}
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
},
{
test: /\.sass$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
},
//{ test: /\.(ttf|eot|woff|woff2|png|jpg|jpeg|svg|gif|webp)$/, loader: 'url-loader', },
{
test: /\.(png|jpg|jpeg|svg|gif|webp)$/,
include: [
path.resolve(__dirname, './frontend/binary/image/')
],
use: [{
loader: 'file-loader',
options: {
name: 'image/[name].[ext]',
}
}]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
include: [
path.resolve(__dirname, './frontend/binary/fonts/')
],
use: [{
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
}
}]
},
{
test: /\.(mp3)$/,
include: [
path.resolve(__dirname, './frontend/binary/audio/')
],
use: [{
loader: 'file-loader',
options: {
name: 'audio/[name].[ext]',
}
}]
},
{
test: /\.(html)$/,
include: [
path.resolve(__dirname, './frontend/pages/')
],
use: [{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
}
}]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: './index.css',
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'frontend/src/', 'template.html'),
filename: 'index.html',
favicon: 'frontend/binary/image/icons/iconfinder_tech_0001_4023871.png',
}),
]
};
module.exports = (env, options) => {
let production = options.mode == 'production';
config.devtool = production ? false : 'inline-cheap-module-source-map';
config.optimization = production ? minimizerBlock : {};
return config;
}
There is a `src folder - template.html file, in which there is such a part of the layout
<div id="root">
<img src="${require(`../binary/image/icons/iconfinder_tech_0001_4023871.png`)}" alt="" />
</div>
which after compilation webpack
reincarnated in index.html in the public folder, I get this result
<div id="root">
<img src="images/iconfinder_tech_0001_4023871.png" alt="" />
</div>
And it works.
At the same time src there is a folderpages with different pages, in which there is the same piece of typesetting
<header>
<img src="${require(`../../../../binary/image/sheelak/0viber-image.jpg`)}" alt=""/>
</header>
and after running webpack a folder with these files is created and here is the result
<header>
<img src="${require(`../../../../binary/image/sheelak/0viber-image.jpg`)}" alt=""/>
</header>
And then the problem of require forimg which in header does not work
getting an error.
Tell me what's wrong with my webpack?
You shall use html-loader with interpolate flag enabled:
{
test: /\.(html)$/,
include: [
path.resolve(__dirname, './frontend/pages/')
],
use: [
{
loader: 'file-loader'
},
{
loader: 'extract-loader'
},
{
loader: 'html-loader',
options: {
interpolate: true,
}
}
],
exclude: [
path.resolve(__dirname, 'frontend/src/', 'template.html')
]
}
I have create pr to fix your problem: https://github.com/sarnor/club/pull/1.
Also noting that interpolation is ugly when you can just write image source like: <img src="../../image/icons/iconfinder_tech_0001_4023871.png".
Also noting that your relative url was pointing to wrong directory, you were missing ../ in your url.
这篇关于webpack4 不编译所有 html 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
