webpack
webpack是什么 – 静态模块的打包工具,能进行模块化开发,自动处理打包后,模板中间的关系(依赖关系)
什么是静态资源 – js css html
如果使用webpack
安装前检查
需要使用系统中之前安装过得 node 中 npm
npm win7 12+ win10 12+ 14+ 也不能低于12
node - v npm -v
准备安装
创建一个目录 web
初始化 — npm init --yes
在安装的时候,防止安装过慢,可以使用中文镜像
npm config set registry https://registry./
安装webpack
npm install webpack
npm install webpack-cli
或
npm install webpack webpack-cli -D -D dev 当安装的工具包,只在开发的时候使用,发布上线后会删除
注:在安装的时候使用了 -D参数 就会在 devDependencies键的位置看到你安装的软件 项目发布后不会被保留
-S save 发布以后,依然保留模块
注:安装的使用使用了 -S 参数 就会在 dependencies 键的位置显示你安装的软件 项目发布后会保留
-g 全局安装(不常用,一旦使用全局安装 之后的所有插件都要全局安装)
如果出现版本不兼容问题 需要使用固定版本
需要通过设置指定版本进行安装软件:
npm install webpack@4.4.4 -D
使用的是版本12+出现了错误 可以指定版本
npm install webpack@5.4.0 -D
nom install webpack-cli@4.2.0 -D
js代码使用webpakc进行打包(两种方法)
方法一:(不太常用)
创建html代码
创建js代码
html文件中的代码
Document aaaabbbbccccdddd
js代码
// 引入模块
import $ from "jquery"
$(ul li:even).css(ackground, ed);
$(ul li:odd).css(ackground,pink);
//引入css
import "./index.css"
import"./index.html"
package.json代码
{
"name": "3",
"version": "1
