项目结构
准备步骤:(webpack本质:node环境下的包)
1.首先初始化项目(终端运行命令),为了得到package.json
npm init -y
y就是yes,英文项目名就直接y就好了,带有中文的项目名,npm init 不要直接enter,要输入一个英文的项目名(像task,demo等等)
2.安装相应依赖包
安装操作命令如下:
npm install webpack -D
npm install webpack-cli -D
-D是项目局部安装,-g是全局安装
3.webpack配置
由于运行webpack命令的时候,webpack需要指定入口文件和输出文件的路径,所以,我们需要在webpack.config.js
中配置这两个路径。根据项目的代码结构,我们来写一下最基本的webpack配置:
webpack.config.js文件
//这个配置文件,其实就是一个JS文件,通过node中的模块操作,向外暴露了一个配置文件
// 导入处理路径的模块
var path = require("path");
// 导出一个配置对象
module.exports = {
entry: path.join(__dirname, "./src/main.js"), // 项目入口文件,要使用webpack打包哪个文件
output: { // 配置输出选项
path: path.resolve(__dirname, "./dist"), // 配置输出的路径,指定输出到哪个目录中去
filename: "bundle.js" // 配置输出的文件名
},
mode: "development" // 模式配置(开发环境模式) webpack3没有mode这个参数
};
手动配置入口文件和输出文件很麻烦,每改动一下代码看效果都要运行很长一段命令。
手动打包项目文件命令:
webpack3.0命令 webpack ./src/main.js ./dist/bundle.js
webpack4需要加 npx webpack ./src/main.js ./dist/bundle.js
webpack4.0以上版本更改了命令,要写成webpack ./src/main.js -o ./dist/bundle.js才是正确的
webpack实现自动打包刷新
不想每次都手动打包项目,可以给项目设置热启动,使用 webpack-dev-server 这个工具,来实现自动打包编译的功能。
需要添加依赖
npm install webpack-dev-server -D
还没完
在内存中根据指定的模板页面,生成一份存在内存中的首页,同时自动把打包好的bundle注入到页面底部,如果要配置插件,需要在导出的对象中,挂载一个plugins节点,这时候需要添加html-webpack-plugin插件
npm install --save-dev html-webpack-plugin
--save-dev局部安装的意思
然后需要在webpack.config.js添加plugins配置
//这个配置文件,其实就是一个JS文件,通过node中的模块操作,向外暴露了一个配置文件
// 导入处理路径的模块
var path = require("path");
//在内存中根据指定的模板页面,生成一份存在内存中的首页,同时自动把打包好的bundle注入到页面底部
//如果要配置插件,需要在导出的对象中,挂载一个plugins节点
var htmlWebpackPlugin = require("html-webpack-plugin")
// 导出一个配置对象
module.exports = {
entry: path.join(__dirname, "./src/main.js"), // 项目入口文件,要使用webpack打包哪个文件
output: { // 配置输出选项
path: path.resolve(__dirname, "./dist"), // 配置输出的路径,指定输出到哪个目录中去
filename: "bundle.js" // 配置输出的文件名
},
plugins: [ //所有webpack插件的配置节点
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'), //指定模板文件路径
filename: 'index.html' //设置生成的内存页面的名称
})
],
mode: "development", // 模式配置(开发环境模式) webpack3没有mode这个参数
module: {}
};
在package.json文件中添加以下代码
终端运行npm run dev
就可以自动打包刷新
各个版本一定要相对应,不然后果很严重,报错会让你报到奔溃!!!!(此时的node是v20.11.1)
以下是测试过的版本,能行!!!(谁能知道我搞了多久吧,呜呜呜!!!)
其他文件代码
main.js代码如下:
//这个main.js是我们项目的JS入口文件
//1.导入jquery
//import *** from ***是ES6导入模块的方式
//由于ES6的代码太高级了,浏览器解析不了,所以,这一行会报错
import $ from 'jquery'
$(function() {
$('li:odd').css('backgroundColor', 'blue')
$('li:even').css('backgroundColor', function() {
return '#' + 'D97634'
})
})
main.js写法需要安装jquery
运行命令 npm i jquery -S
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>
<!-- 注意:不推荐直接在这里引用任何包含css的文件 -->
</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>