webpack打包实例详解

最新推荐文章于 2022-09-28 21:25:23 发布

CH_whale

最新推荐文章于 2022-09-28 21:25:23 发布

阅读量3.7k

点赞数

分类专栏：项目开发文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/CH_whale/article/details/123458315

版权

项目开发专栏收录该内容

12 篇文章 1 订阅

订阅专栏

参考博客：webpack的功能介绍以及如何使用webpack_银鞍照白马的博客-CSDN博客_webpack怎么用

webpack官方文档：概念 | webpack 中文网 (webpackjs.com)

1. 新建一个webpack-demo文件

文件目录如下：

各文件内容如下：

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h3>hello</h3>
    <div id="root"></div>
    <script src="./index.js"></script>
    <script src="./js/header.js"></script>
    <script src="./js/menu.js"></script>
    <script src="./js/common.js"></script>
</body>

</html>

index.js

var dom = document.getElementById('root')

header.js

menu.js、common.js和header.js形式一样

var header = document.createElement('div')
header.innerText = 'header'
dom.append(header)

完成以上步骤后，打开index.html，页面展示如下图所示：

2. 使用webpack打包

打开终端初始化项目：

npm init

输入命令行后一路回车就行，会生成一个package.json

安装webpack-cli、webpack

npm install webpack-cli --save-dev    //--save-dev表示开发时候依赖的东西
npm install webpack --save    //--save是开发之后还依赖的东西

修改index.js文件

import Header from './js/header'
import Common from './js/common'
import Menu from './js/menu'

new Header()
new Common()
new Menu()

修改header.js，common.js、menu.js同理

function Header (){
    var dom = document.getElementById('root')
    var header = document.createElement('div')
    header.innerText = 'header'
    dom.append(header)
}
export default Header

执行命令行，打包JS

npx webpack ./index.js

生成一个dist文件夹

在index.html引入刚刚打包完成的dist里面的main.js

最后就OK了

CH_whale

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack打包实例详解

参考博客：webpack的功能介绍以及如何使用webpack_银鞍照白马的博客-CSDN博客_webpack怎么用webpack官方文档：概念 | webpack 中文网 (webpackjs.com)1. 新建一个webpack-demo文件文件目录如下：各文件内容如下：index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> .
复制链接

扫一扫