webpack的基本使用
创建列表隔行变色项目
1.新建项目空白目录，并运行 npm init -y 命令，初始化包管理配置文件package.json
2.新建src源代码项目
3.新建src -> index.hmtl 首页和src -> index.js 脚本文件
4.初始化页面基本结构
<!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="./index.js"></script> <!-- <script src="../dist/main.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> </ul> </body> </html>
5.运行 npm install jquery -S 命令，安装jQuery
6.通过ES6 模块化的方式导入jQuery，实现列表隔行变色
// 使用ES6导入语法，导入jQuery import $ from 'jquery' // 定义jQuery的入口 $( function() { $('li:odd').css('background-color', 'blue'); $('li:even').css('background-color', 'yellow'); } )
// 使用ES6导入语法，导入jQuery
import $ from ‘jquery’
会报错，样式会无法显示，需要安装webpack
在项目中安装webpack
在对应的文件夹中(存放代码的文件，刚新建的项目目录)启动终端，运行
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
安装webpack相关的两个包
-D 装完后，把信息记录到package.json的devDependencies
-S 装完后，把信息记录到package.json的dependencies
项目开发和上线都要用到的包，用-S；只在开发阶段用，用-D
-S是–save的简写；-D是–save-dev的简写
在项目中配置webpack
1.在项目的根目录中创建webpack.config,js的webpack的配置文件，并初始化如下的基本配置：
// 使用Node.js中的导出语法，向外导出一个webpack的配置对象 module.exports = { // 代表webpack运行的模式，可选值有两个development和production //development 开发时使用 //production 上线时使用 //development 打包时间短 文件大 开发用； production打包时间长 文件小 项目上线用 mode: 'development' }
2.在webpack.json的script节点下，新增dev脚本
"scripts": { //script节点下的脚本可以通过npm run 执行 "dev": "webpack" },
3.在终端运行
npm run dev
webpack.config.js的作用
webpack.config.js是webpack的配置文件，webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包
由于webpack是基于node.js开发出来的打包工具，在它的配置文件中支持使用node.js的相关语法和模块进行webpack的个性化配置
webpack的默认约定
在webpack4.x 和 5.x 的版本中，
1.默认的打包入口为src -> index.js
2.默认的输出文件路径为 dist -> main.js
可以在webpack.config.js中修改打包的默认约定
自定义打包的入口和出口
在webpack.config.js中，通过entry节点指定打包的入口，output节点指定打包的出口
//导入node.js中操作路径模块 const path = require('path'); module.exports = { // 代表webpack运行的模式，可选值有两个development和production mode: 'development' entry: path.join(__dirname, './src/index.js'), //打包入口文件路径 output: { path: path.join(__dirname, './dist'), //输出文件的存放路径 filename: 'main.js' //输出文件名称 } }
每次改代码后需要重新打包(麻烦)
webpack中的插件
可以安装和配置第三方插件，拓展webpack的能力，从而让webpack用起来更方便
常用的webpack插件：
1.webpac-dev-server：
每当修改源代码，webpack会自动进行项目的打包和构建
2.html-webpack-plugin：
可以通过此插件自定制index.html页面的内容
安装 webpac-dev-server
运行如下命令安装插件：
npm install webpac-dev-server@3.11.2 -D
配置webpac-dev-server：
1.修改package.json中的script的dev命令：
"scripts": { "dev": "webpack serve" },
2.再次运行 npm run dev
3.在浏览器中访问 http://localhost:8080/ 查看打包效果
webpack会启动一个实时打包的http服务器
如果报错了是webpack-cli的版本不兼容，重新安装webpack-cli的4.9.0版本
npm install webpack@5.42.1 webpack-cli@4.9.0 -D
由于：
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
所以需要修改html中导入的js
<script src="/main.js"></script>
在浏览器中打开 http://localhost:8080/ 打开src(浏览器会自动打开index.html)
安装 html-webpack-plugin
运行如下命令即可在项目中安装此插件：
npm install html-webpack-plugin@5.3.2 -D
在webpack.config.js文件中配置
html-webpack-plugin会把指定的页面复制到根目录中，在复制页面的同时会自动注入一个脚本，使得可以直接访问链接查看网页的效果，不用在点击src文件夹
//导入html-webpack-plugin插件 得到插件的构造函数 const HtmlPlugin = require('html-webpack-plugin') // new构造函数创建插件的实例对象 const htmlPlugin = new HtmlPlugin({ // 指定要复制哪个页面 template: './src/index.html', // 指定复制出来的文件名和存放路径 filename: './index.html' }) // 使用Node.js中的导出语法，向外导出一个webpack的配置对象 module.exports = { // 代表webpack运行的模式，可选值有两个development和production mode: 'development', // 插件的数组 将来webpack在运行时会加载并调用这些插件 plugins: [htmlPlugin] }
通过插件复制到项目根目录的index.html会被放到内存中，插件在生成index.html页面会自动注入打包的index.js文件
devServer节点
// 使用Node.js中的导出语法，向外导出一个webpack的配置对象 module.exports = { // 代表webpack运行的模式，可选值有两个development和production mode: 'development', // 插件的数组 将来webpack在运行时会加载并调用这些插件 plugins: [htmlPlugin], devServer: { // 首次打包成功后自动打开浏览器 open:true, // 在http协议中如果端口号为80可以省略 port:80, // 指定主机运行的地址 host:'127.0.0.1' } }
处理css文件
在index.js文件中
// 导入样式，在webpack中，一切皆模块，都可以通过es6导入语法进行导入和使用 import './css/index.css'
运行：
npm i style-loader@3.0.0 css-loader@5.2.6 -D
安装处理css文件的loader
//导入html-webpack-plugin插件 得到插件的构造函数 const HtmlPlugin = require('html-webpack-plugin') // new构造函数创建插件的实例对象 const htmlPlugin = new HtmlPlugin({ // 指定要复制哪个页面 template: './src/index.html', // 指定复制出来的文件名和存放路径 filename: './index.html' }) // 使用Node.js中的导出语法，向外导出一个webpack的配置对象 module.exports = { // 代表webpack运行的模式，可选值有两个development和production mode: 'development', // 插件的数组 将来webpack在运行时会加载并调用这些插件 plugins: [htmlPlugin], devServer: { // 首次打包成功后自动打开浏览器 open:true, // 在http协议中如果端口号为80可以省略 port:8080, // 指定主机运行的地址 host:'127.0.0.1' }, module: { rules:[{ test:/\.css$/, use:['style-loader', 'css-loader'] }] } }
