2建立一个demo

最新推荐文章于 2023-02-07 11:14:58 发布

无忧勾勾

最新推荐文章于 2023-02-07 11:14:58 发布

阅读量623

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack

本文链接：https://blog.youkuaiyun.com/free_and_strong/article/details/81628595

webpack 专栏收录该内容

23 篇文章

订阅专栏

建立一个demo
进入建立的webpack_demo目录下创建一个dist文件夹（用于生产）和src文件夹（用于开发环境）
- src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。
- dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。
编写程序文件：
- dist文件下手动建立一个index.html文件
  /dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>webpack</title>
</head>
<body> 
    <div id="title"></div> 
    <script src="./bundle.js"></script>
</body>
</html>

解释：这里引入bundle.js文件，等会用webpack可以生成在src下面建立一个entry.js 的入口文件

/src/entry.js下：

document.getElementById(‘title’).innerHTML=’Hello Webpack’;

然后就是进行webpack打包：
1. 在vs code里面的终端中输入： webpack src/entry.js dist/bundle.js 执行成功后会在dist目录下生成bundle.js文件，在浏览器中显示Hello Webpack 的信息
2. 也可能是这样进行打包webpack src/entry.js –output dist/bundle.js –mode development