webpack.config.js
const path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: "development",
// 配置打包的入口和出口文件
entry: './src/index.js',
output: {
// 输出文件的存放路径
path: path.resolve(__dirname, 'dist'),
// 输出文件的名称
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'rd平台',
template: "src/index.html"
})
]
}
package.json
{
"name": "lianxi03",
"version": "1.0.0",
"description": "",
"main": "./src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve --open Chrome.exe"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.5.1"
},
"devDependencies": {
"html-webpack-plugin": "^4.5.0",
"webpack": "^5.11.0",
"webpack-cli": "^4.3.0",
"webpack-dev-server": "^3.11.0"
}
}
index.js
import $ from "jquery"
$(function() {
$("li:odd").css("backgroundColor", "pink");
$("li:odd").css("fontWeight", "bold");
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../dist/bundle.js"></script>
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
</ul>
</body>
</html>
使用 npm run start 执行自动编译,注意这个时候,不用在模板页中,引入打包的js,会在内存中自动加入
但是如果开完完毕时,使用webpack命令打包时,记得要将webpack.config.js中的如下代码去掉,此时,需要将打包后的js,通过script标签引入到html页中
plugins: [
new HtmlWebpackPlugin({
title: 'rd平台',
template: "src/index.html"
})
]
FR:徐海涛(hunk Xu)
QQ技术交流群:386476712
原文地址:https://blog.csdn.net/qq_15267341/article/details/111897991
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。