webpack简单介绍
webpack:是一个模块打包器
1.安装 :
cnpm install webpack webpack-cli -D
2. webpack打包文件步骤 :
1、在项目下创建一个 webpack.config.js 文件
2、对webpack.config.js文件进行配置工作
在项目下创建一个入口文件src目录 ,该目录中创建一个入口文件xx.js
在项目下创建一个出口文件dist目录 该目录下的出口文件会通过webpack执行生成
3、项目下创建一个html文件 连入出口的bundle.js文件
4、执行 webpack
3.项目根目录下 配置webpack.config.js文件 也就是配置入口和出口
var path = require("path");
模块的暴露
module.exports = {
entry : "./src/entry.js",//入口文件配置项
output: {
path:path.resolve(__dirname,"dest"), 出口文件的路径一般都用绝对路径
filename : "bundle.js"
}
}
4.测试打包项目
目录结构 :
通过 : npm run dev(在package.json中配置好 Scripts:{ "dev":"webpack" })
5.实现打包多个相互依赖的js文件过程
通过 require()方法 在入口文件中引入
module.exports = { } 模块暴露
6.样式的打包 : 通过安装loader加载器 可以将静态的样式文件一同打包到bundle.js文件中 通过下面命令安装加载器
安装该插件 : npm install css-loader style-loader
在entry.js 中导入样式 :
require("!style-loader!css-loader!../css/style.css"); 静态资源导入需要 加 !,必须先导入style-loader
7.实现自动监听项目配置文件 不需要每次手动运行 npm run dev
核心思想 : 修改 package.json文件
"build":"webpack --watch" 此时运行 npm run build 即可实现自动监听
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 自定义通信协议——实现零拷贝文件传输
· Brainfly: 用 C# 类型系统构建 Brainfuck 编译器
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· DeepSeek 全面指南,95% 的人都不知道的9个技巧(建议收藏)
· 自定义Ollama安装路径
· 本地部署DeepSeek
· 快速入门 DeepSeek-R1 大模型
· DeepSeekV3+Roo Code,智能编码好助手