webpack初起步
2024-08-21 11:28:51
webpack 用于编译 JavaScript 模块。一旦完成安装,就可以通过 webpack 的 CLI 或 API 与其配合交互。
首先创建一个目录,进入目录中,初始化npm 然后本地安装webpack,webpack-cli ,lodash
目录结构:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
webpack.config.js
const path = require('path'); module.exports = {
entry: './src/index.js',
output:{
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
package,json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
},
"dependencies": {
"lodash": "^4.17.11"
}
}
输入npm run build
最新文章
- Java注解
- xmpp整理笔记:用户网络连接及好友的管理
- PHP 7 测试用例(转)
- 不同版本vpb与osg对应关系
- centos修改hostname以及时间同步
- 根据某个文件或文件夹自制rpm包
- java微信接口之三—上传多媒体文件
- HTML中的边框属性
- or1200下raw-os(仿真环境篇)
- web前端技术
- 关于android:focusable属性
- 协同编辑多人word一个小技巧文件
- ZOJ 3529 A Game Between Alice and Bob 博弈好题
- 微信小程序入门(前言)
- python接口自动化(十)--post请求四种传送正文方式(详解)
- windows 下 nginx log 分割
- 基于STM32F1的局域网通信模块W5500驱动
- 419. Battleships in a Board 棋盘上的战舰数量
- 数控AGC实现(转)
- django的FBV和CBV的装饰器例子
热门文章
- 管理DnS服务器知识点
- Android Dialog的整个生命周期
- spring测试框架的使用
- Automate the Sizing of your SGA in Oracle 10g
- java基础(九) 可变参数列表介绍
- leetCode题解之字符最短路径解法2
- leetCode题解之根据字符出现的频率排序
- Oracle 查看锁情况
- 关于使用Entity Framework时遇到的问题 未找到具有固定名称“System.Data.SqlClient”的 ADO.NET 提供程序的实体框架提供程序。请确保在应用程序配置文件的“entityFramework”节中注册了该提供程序
- Python学习---IO的异步[asyncio +aiohttp模块]