手把手教你webpack3(1)最简单的webpack实例-阿里云开发者社区

开发者社区> 零零水> 正文

手把手教你webpack3(1)最简单的webpack实例

简介:
+关注继续查看

0、前注

本文内容源于webpack中文文档,以及我自己实践中写的若干DEMO。

每个DEMO以文件夹为单位,从入门到进阶,根据文件夹编号为准,逐步递进。

成文时,webpack版本是【3.8.1】

0.1、安装webpack

首先你需要安装Node.js,点击打开Node.js下载页面。安装完Node.js后,会自带npm包管理器。

npm install webpack -g

这个命令将安装最新版本的webpack(全局,学习教程中推荐,避免多次安装。但实践中还是有必要一个项目一个webpack,避免版本冲突带来的bug)

目前版本是3.8.1(2017/11/27)

webpack -v

查看当前webpack版本

执行命令:

以下执行webpack命令时,指在对应文件夹下,通过控制台执行命令。

快速抵达对应目录的控制台(win):

在对应目录下,按住 shift,然后点击鼠标右键,在弹窗里选择在此处打开命令窗口即可启用

1、webpack基本结构

示例目录

文件目录见1、最简单的webpack实例这个目录。

// webpack.config.js 这个是webpack的管理配置文件

// 以CMD的格式导出模块
module.exports = {
    // 入口文件,指向app.js
    entry: './app.js',
    // 出口文件
    output: {
        // 文件名,将打包好的导出为bundle.js
        filename: './bundle.js'
    }
}

// app.js  这个是入口文件
import bar from './bar'

bar()

// bar.js 这个是入口文件引入的模块
export default function bar () {
    console.log('bar')
}

// page.html 这个是html目录文件,这个文件引入入口文件
<html>
<head>
    <title>1、最简单的webpack实例</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>

控制台执行webpack(或者 webpack --config webpack.config.js ),会显示如下内容:

D:\study notes\Project\webpack_learner\1、最简单的webpack实例>webpack
Hash: 2fdcc03878d7c5480ce6
Version: webpack 3.8.1
Time: 58ms
      Asset     Size  Chunks             Chunk Names
./bundle.js  3.13 kB       0  [emitted]  main
   [0] ./app.js 115 bytes {0} [built]
   [1] ./bar.js 142 bytes {0} [built]

打完后的bundle.js文件内容略。这个时候打开html文件,查看控制台,会发现正常输出了bar

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
实战课堂 | DMS企业版教你用一条SQL搞定跨实例查询
数据管理DMS企业版提供了安全、高效地管理大规模数据库的服务。面对多元的数据库实例,为了更方便地查询被“散落”在各个地方的业务数据,我们在DMS企业版中提供了跨数据库实例查询服务。
2764 0
教你借助设计模式限制实例化数量 | 带你学《Java面向对象编程》之七十三
开发过程中,如果遇到了某些要求,需要限制实例化类的数量时,需要借助本节介绍到的单例与多例设计模式来实现。
521 0
C#版Websocket实例
Demo地址:www.awbeci.xyz websocket有java、nodejs、python,Php等等版本,我使用的是C#版本,服务器端是Fleck,github地址:https://github.
2233 0
openstack创建实例无密码登录详解
[root@openstack ~]# ssh-keygen Generating public/private rsa key pair. Enter file in which to save the key (/root/.
917 0
从零开始学习 webservice第一集,java webservice简单实例入门教程
现在从零开始学习webservice 概念自己百度搜,总之,webservice就相当于一个接口,就像你走进了一家售货店,你不需要知道这家店怎么卖给你东西,你拿着钱去,说我要一包玉溪,人家就会给你返回一包玉溪烟,这就是webservice。
1478 0
+关注
零零水
主攻JS
234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载