打包工具
npm i webpack webpack-cli -g -D
解析css中使用的图片
npm i url-loader file-loader -D
解析css样式资源
npm i style-loader css-loader -D
将指定的页面拷贝到打包目录,并且将打包后的js以标签方式插入到页面中
npm i html-webpack-plugin -D
处理html中的图片
npm i html-loader -D
自动编译
npm i webpack-dev-server -D
CSS提取 ,这个取代之前的style-loader
npm i mini-css-extract-plugin -D
css兼容性处理
npm i postcss-loader autoprefixer -D
css压缩
npm i -D optimize-css-assets-webpack-plugin
js兼容性处理,可以将es6及高级语法转成普通语法
npm i babel-loader @babel/core @babel/preset-env -D
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"
}
}
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"
})
]
}
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