Webpack 如何根据网页上导入的html生成新的html?
假设我导入了一个带有多个链接和脚本标记(以及资源)的html build/index.js 我有这个配置文件 webpack.config.js 我得到的结果是:Webpack 如何根据网页上导入的html生成新的html?,webpack,Webpack,假设我导入了一个带有多个链接和脚本标记(以及资源)的html build/index.js 我有这个配置文件 webpack.config.js 我得到的结果是: dist/... /assets/... /index.js /index.css 但是我想要一个新的html,旧的链接和脚本已经消失,一个新的链接和脚本标签指向我的包。我尝试过,但当我将index.html作为模板传递时,它会再次尝试解析链接、脚本和资产,而且我认为这不是一个合适的工具,我当前的设置中应该有一个选
dist/...
/assets/...
/index.js
/index.css
但是我想要一个新的html,旧的链接和脚本已经消失,一个新的链接和脚本标签指向我的包。我尝试过,但当我将index.html作为模板传递时,它会再次尝试解析链接、脚本和资产,而且我认为这不是一个合适的工具,我当前的设置中应该有一个选项可以帮助我生成新的html。您能添加一个描述,说明您希望执行哪种转换吗?也就是说,什么进去了,什么应该出来。这将有助于指出解决方案。:)@JuhoVepsäläinen html输入,html输出。它将链接标记捆绑在一个捆绑包中,脚本标记捆绑在另一个捆绑包中,并在新的html中引用它们。每个css和js文件都是静态的,并且没有使用节点模块。好的,我现在明白了。webpack可能不是用例的理想工具,因为它有点以JavaScript为中心。我想知道你的想法是否更有效。
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