原生webpack如何从外部引入js和css呢?
index.html代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title><%=htmlWebpackPlugin.options.title%></title><%for(variinhtmlWebpackPlugin.options.css){%><linkrel="stylesheet"type="text/css"href="<%=htmlWebpackPlugin.options.css[i]%>"><%}%></head><body><divid="#app"></div><%for(variinhtmlWebpackPlugin.options.js){%><scripttype="text/javascript"src="<%=htmlWebpackPlugin.options.js[i]%>"></script><%}%></body></html>webpack.config.js配置
constpath=require("path");varHtmlWebpackPlugin=require("html-webpack-plugin");constwebpack=require("webpack");module.exports={entry:"./src/index.js",mode:"production",//根据环境自行配置output:{filename:"bundle.js",path:path.resolve(__dirname,"dist"),},devServer:{//热部署hot:true,},plugins:[newHtmlWebpackPlugin({title:"Meat.Qing",template:"index.html",inject:true,//注入关键js:["https://unpkg.com/react@17.0.1/umd/react.production.min.js"],//从外部导入jscss:["https://unpkg.com/antd@4.14.0/dist/antd.min.css"],//从外部导入css}),newwebpack.HotModuleReplacementPlugin(),],};demo代码链接:https://download.csdn.net/download/qq_20173195/86511769
解压之后执行
npminstallnpmrunstart到dist目录右键浏览器打开index.html即可，
F12打开浏览器控制台，查看元素面板即可看到效果
访客