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
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
