原生Webpack的html-webpack-plugin配置js,css

武飞扬头像

Meta.Qing

2024-03-08 帮助3人

原生webpack如何从外部引入js和css呢?

index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
<% for (var i in htmlWebpackPlugin.options.css) { %>
<link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.css[i] %>">
<% } %>
</head>
<body>
<div id="#app"></div>
<% for (var i in htmlWebpackPlugin.options.js) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.js[i] %>"></script>
<% } %>
</body>
</html>

webpack.config.js 配置

const path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
mode: "production", //根据环境自行配置
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
devServer: {
// 热部署
hot: true,
},
plugins: [
new HtmlWebpackPlugin({
title: "Meat.Qing",
template: "index.html",
inject: true, //注入关键
js: ["https://unpkg.com/react@17.0.1/umd/react.production.min.js"], //从外部导入js
css: ["https://unpkg.com/antd@4.14.0/dist/antd.min.css"], //从外部导入css
}),
new webpack.HotModuleReplacementPlugin(),
],
};

demo代码链接:https://download.csdn.net/download/qq_20173195/86511769

解压之后执行

npm install
npm run start

到dist目录右键浏览器打开index.html即可，

F12打开浏览器控制台，查看元素面板即可看到效果

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhfeiicj

系列文章

同类精品