跳到主要内容

03-快速上手webpack

建立基本项目结构​

首先进入上节课我们建立的webpack_demo目录（每个人建立的位置不同，可能建立在了D盘或者E盘）。进入后在根目录建立两个文件夹，分别是src文件夹和dist文件夹： • src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。 • dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。 你可以理解成src是源码文件，dist是我们编译打包好的文件；一个用于开发环境，一个用于生产环境。

编写程序文件：​

文件夹建立好后，我们在dist文件下手动建立一个index.html文件，并写入下面的代码。

  • dist/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>
<div id="title"></div>
    <script src="./bundle.js"></script>
</body>
</html>

这里引入了一个JavaScript的bundle.js文件。这个文件现在还没有，这是用webpack执行打包命令后生产的文件。我们的index.html写好后，接下来在src文件夹下建立entery.js的文件，用于编写我们的JavaScript代码，也是我们的入口文件。 src/entery.js document.getElementById("title").innerHTML= "Hello webpack!"; 这个文件的代码很简单，就是在 标签里写入Hello Webpack这句话

第一次Webpack打包​

Webpack其实是可以在终端（命令行）中使用的，基本使用方法如下：

webpack {entry file} {destination for bundled file}

• {entery file}:入口文件的路径，本文中就是src/entery.js的路径； • {destination for bundled file}:填写打包后存放的路径。 • 注意：在命令行中是不需要写{ }的。 执行的结果如下图：

mTnMBFrhVQQBd3EhJ5rQ.png

λ webpack .\src\entery.js .\dist\bundle.js
Hash: 880faca02375a6425198
Version: webpack 3.12.0
Time: 46ms
Asset Size Chunks Chunk Names
bundle.js 2.54 kB 0 [emitted] main
[0] ./src/entery.js 63 bytes {0} [built]

命令执行成功后，会在dist目录下出现bundle.js文件，这时我们就可以在浏览器中预览结果了，网页中显示出了Hello Webpack的信息。