目录
三、webpack 打包
1.概述
正常项目是要基于模块编程的,但是传统的项目不支持模块化,这个时候需要使用webpack进行管理,打包,打包之后项目就支持了模块化,就能够正常运行;
从本质上来说,webpack是一个静态模块打包工具。
要想让我们写好的模块化代码在各式各样的浏览器上能做到兼容,就必须借助于其他工具;而webpack的其中一个核心就是让我们可以进行模块化开发,并帮我们处理模块间的依赖关系。不仅仅是Javascript文件,我们的css、图片、json文件等在webpack中都可以当作模块来使用,这就是webpack的模块化概念。
Webpack有人也称之为 模块打包机 ,由此也可以看出Webpack更侧重于模块打包,当然我们可以把开发中的所有资源(图片、js文件、css文件等)都可以看成模块,最初Webpack本身就是为前端JS代码打包而设计的,后来被扩展到其他资源的打包处理。Webpack是通过loader(加载器)和plugins(插件)对资源进行处理的。
2. webpack安装
首先环境需要下载node
下载地址Node.js — Node v16.13.0 (LTS) (nodejs.org)
傻瓜式安装,此处不讲,忽略。
node -v 查看自己电脑上是否有node
注意: 要想使用webpack,需要安装2个模块,(1) webpack (2)webpack-cli
npm install webpack
npm install webpack-cli
或者直接一个指令安装多个模块
npm Install webpack webpack-cli
-S 生产模式安装 (默认值) ; -D开发模式安装 ; -g 全局安装
查看webpack是否安装成功: webpack -v
3. webpack使用
举例:安装jquery
npm install jquery
index.html
4.打包
4.1打包js文件
第一种:使用webpack进行打包
1.打包指令 webpack 需要打包文件的路径 -o 目录名称 【-o output 导出】 webpack ./index.js -o dist npm install webpack -g npm install webpack-cli -g
第二种:使用配置文件打包 (推荐)
通过配置文件进行打包,可以快速的对js、html、css文件进行打包 1.创建一个配置文件 webpack.config.js 2.配置文件的内容 // webpack文件配置 // 1.引入path模块 (路径模块path) const path = require("path"); // 2.对外暴露 module.exports = { // path.join("路径1","路径2") // C:\Users\zwd\Desktop\74期\day7\课件\webpack + ./index.js entry:path.join(__dirname,"./index.js"),// 进入的意思 output:{ // -o path:path.join(__dirname,"./dist"), filename:"bbb.js",//打包之后的名将名称 } } 3.设置运行的指令 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start":"webpack ./index.js -o dist --mode production", "nstart":"webpack --config webpack.config.js --mode production" }, 执行 npm run nstart
问题:每一次修改代码,都需要重新打包我们的项目,比较麻烦,所以我们需要搭建一个人热重载服务,辅助我们项目开发
5.热重载服务
特点:可以搭建一个服务器,这个服务器叫热重载,将你的项目运行在他的这个服务器上,你修改了代码,就重启在线打包项目,并重新启动服务,让你完成实时项目预览
如何使用热重载
1.安装
npm install webpack-dev-server 热重载模块
2.使用热重载服务
浏览器运行页面: 1.将页面放到public下面(public是自己创建的空目录) 2.在index.html中修改 js文件的地址 直接使用/+文件名称
6.html+css文件打包
1.打包html的打包
1.安装一个模块 npm install html-webpack-plugin 2.修改webpack.config.js文件 // 2.对html进行打包 plugins: [ // 实例化 new HtmlWebpackPlugin({ template: path.join(__dirname,"./public/index.html"), //要打包的模板 filename:"index.html",// 打包之后的名字 }) ] 打包之后的dist目录,就是将来上线要用的文件;
2.打包css
1.安装模块 2个模块 npm install css-loader js能够解析css代码 npm install style-loader js解析css代码之后,解析的代码让html代码认识 2.创建css文件 index.css文件 *{ font-size: 60px; } 注意:要将当前的css文件引入到index.js文件中 import “./index.css”; 3.修改配置文件 // 3.打包css文件 npmjs.com 网站上找到的 module: { rules: [ { test: /\.css$/i, //正则表达式 $ 以什么结尾 i 不区分大小写 use: ["style-loader", "css-loader"], }, ], }, css文件的内容,会打包到js文件中,js文件会被引入html文件中,运行html文件,即可生效