最简单的webpack实例

3G技术应用

1人已加入

描述

每个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.jsentry:'./app.js',// 出口文件output: {// 文件名,将打包好的导出为bundle.jsfilename:'./bundle.js'} }// app.js 这个是入口文件import bar from'./bar'bar()// bar.js 这个是入口文件引入的模块exportdefaultfunctionbar(){console.log('bar') }// page.html 这个是html目录文件,这个文件引入入口文件

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

D:\study notes\Project\webpack_learner\1、最简单的webpack实例>webpackHash:2fdcc03878d7c5480ce6Version:webpack3.8.1Time:58ms Asset Size Chunks Chunk Names ./bundle.js3.13kB0[emitted] main [0] ./app.js115bytes {0} [built] [1] ./bar.js142bytes {0} [built]

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

打开APP阅读更多精彩内容
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

×
20
完善资料,
赚取积分