webpack - 如何根据 webpack 上导入的 html 生成新的 html?
问题描述
假设我已经导入了一个带有多个链接和脚本标签(和资产)的 html
构建/index.js
import '../public/index.html'
我有这个配置文件
webpack.config.js
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const webpack = require('webpack')
module.exports = {
mode: 'none',
entry: {
index: './build/index.js',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.html$/i,
use: ['html-loader'],
},
{
test: /\.js$/i,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
{
test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
},
],
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg|webp|mp4)(\?[a-z0-9=.]+)?$/,
exclude: /fonts/,
use: [
{
loader: 'file-loader',
options: {
name: '[folder]/[name].[ext]',
publicPath: (url, resourcePath, context) => {
let newPath = resourcePath.replace('public/', '')
return `${path.relative(context, newPath)}`
},
outputPath: (url, resourcePath, context) => {
let newPath = resourcePath.replace('public/', '')
return `${path.relative(context, newPath)}`
},
},
},
],
},
{
test: /\.(svg|eot|woff|woff2|ttf)$/,
exclude: /images/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: (url, resourcePath, context) => {
let newPath = resourcePath.replace('public/', '')
return `${path.relative(context, newPath)}`
},
outputPath: (url, resourcePath, context) => {
let newPath = resourcePath.replace('public/', '')
return `${path.relative(context, newPath)}`
},
},
},
],
},
],
},
plugins: [
new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'pooper.js': 'popper.js',
'stackblur-canvas': 'stackblur-canvas',
rgbcolor: 'rgbcolor',
'datatables.net': 'datatables.net',
moment: 'moment',
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
}
我得到类似的东西:
dist/...
/assets/...
/index.js
/index.css
但我想要一个新的 html,其中的旧链接和脚本消失了,还有一个新的链接和脚本标签指向我的包。我尝试了 HtmlWebpackPlugin,但是当我将 index.html 作为模板传递时,它会尝试再次解析链接、脚本和资产,而且我认为它不是适合这项工作的工具,并且在我当前的设置中应该有一个选项帮助我生成新的 html。
解决方案
推荐阅读
- scikit-learn - 如何标记编码多个不连续的数据框列
- excel - 在单独的工作表上的主表中查找单元格值的多个实例 - excel
- java - 如果元素的总和大于 Integer.MAX_VALUE,我们可以使用 IntStream#sum 吗?
- symfony - Symfony Tactician-bundle Typehints = 缺少处理程序方法错误
- java - Java:如何为 Windows 和 MAC 设置 java 路径
- python - 按特定字母拆分字符串,同时将它们保留在字符串中
- windows - 从powershell递归归档某种类型的所有文件
- gradle - Gradle 4.4 -> 4.10:不再显示正在下载的依赖项
- c# - 转换树中的表
- javascript - 在 Reactjs 中映射数组对象