npm i webpack -g
全局安装webpack,这样就能在全局使用webpack的命令npm i webpack --save-dev
安装到项目依赖中项目结构:
image
npm init -y
初始化项目,使用npm管理项目中的依赖包npm i jquery -s
安装jquery类库main.js
并书写隔行变色的代码逻辑:// 导入jquery类库
import $ from 'jquery'
$(function () {
// 设置奇数行背景色
$('li:odd').css('background-color','lightblue')
// 设置偶数行背景色,索引从0开始,0是偶数
$('li:even').css('background-color',function () {
return '#'+'F15A24'
})
})
main.js
会报错,因为浏览器不认识import
这种高级的JS语法,需要使用webpack进行处理,webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法;webpack 入口文件路径 输出文件路径
对main.js
进行处理:webpack src/js/main.js -o dist/bundle.js
注意如果提示没有webpack-cli,安装:
npm install webpack-cli -g
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
</style>
<!--注意不推荐在这里引入任何包和css文件-->
<!--由于es6语法浏览器不识别 会报错-->
<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>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
<li>这是第10个li</li>
</ul>
</body>
</html>
项目结构:
image
webpack.config.js
webpack.config.js
中配置这两个路径:webpack
// 导入处理路径的模块
var path = require('path');
// 导出一个配置对象,将来webpack在启动的时候,会默认来查找webpack.config.js,并读取这个文件中导出的配置对象,来进行打包处理
module.exports = {
entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
output: { // 配置输出选项
path: path.resolve(__dirname, 'dist'), // 配置输出的路径
filename: 'bundle.js' // 配置输出的文件名
}
}
webpack-dev-server
来实现代码实时打包编译,当修改代码之后,会自动进行打包构建。cnpm i webpack-dev-server --save-dev
安装到开发依赖或者 npm i wepack-dev-server -D
webpack-dev-server
来进行打包,发现报错,此时需要借助于package.json
文件中的指令,来进行运行webpack-dev-server
命令,在scripts
节点下新增"dev": "webpack-dev-server"
指令,发现可以进行实时打包,但是dist目录下并没有生成bundle.js
文件,这是因为webpack-dev-server
将打包好的文件放在了内存中bundle.js
放在内存中的好处是:由于需要实时打包编译,所以放在内存中速度会非常快http://localhost:8080/
网站,发现是一个文件夹的面板,需要点击到src目录下,才能打开我们的index首页,此时引用不到bundle.js文件,需要修改index.html中script的src属性为:<script src="../bundle.js"></script>
http://localhost:8080/
的时候直接访问到index首页,可以使用--contentBase src
指令来修改dev指令,指定启动的根目录: "dev": "webpack-dev-server --contentBase src"
同时修改index页面中script的src属性为<script src="bundle.js"></script>
这时的index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
</style>
<!--注意不推荐在这里引入任何包和css文件-->
<!--由于es6语法浏览器不识别 会报错-->
<!--<script src="../dist/bundle.js"></script>-->
<!-- /bundle.js放在了内存中,实际看不到 是在根目录下-->
<script src="/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>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
<li>这是第10个li</li>
</ul>
</body>
</html>
常用命令:
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
--open表示自动打开
--port 3000 端口3000
--contentBase src根路径
--hot 热启动 不需要手动刷新页面 自动重载
package.json:
{
"name": "WEBPACK-STUDY",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.3.1",
"webpack": "^4.25.1"
},
"devDependencies": {
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
html-webpack-plugin
插件配置启动页面