第二节、动手建立一个demo

来源：互联网发布：过山车大亨 for mac 编辑：程序博客网时间：2024/06/07 05:35

建立基本项目结构

首先进入上节课我们建立的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>jsGao</title></head><body>    <div id="title"></div>    <script src="./entry.js"></script>    <script src="./entry2.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}

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

在我写的例子中，终端执行命令如下：

webpack src/entery.js dist/bundle.js

执行的结果如下图：

第二节：快速上手一个demo

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

总结：

从这个Demo中你会了解到webpack的基本用法和使用过程，并会了命令行打包的方法。在这节文章的最后，我还是要强调，你一定要把本节内容在自己的电脑上敲一遍，这样你才能深入了解。

注意：

此出为了查看预览效果，我用cnpm install -g live-server安装了live-server，在项目目录下启动live-server可以查看网页预览效果
关于新老项目的webpack更新：
第一种方法，直接删除项目中的node_modules文件夹，然后cmd输入npm install --save-dev webpack进行安装，这是针对新项目。
第二种方法，这是针对老项目，项目中安装了比较多的依赖包。这时候先在package.json中找到webpack包信息，手动修改版本为最新版，然后cmd执行npm install就可以了

阅读全文

0 0