安装webpack以及使用方法介绍

图标

豆瓜

豆瓜网

豆瓜官网专栏

豆瓜 图标 2021-06-15 15:36:51

一、webpack是什么?

webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 webpack 的核心是 依赖分析,把依赖分析出来了,其他都是细枝末节了

二、安装webpack

①前提,你的电脑需要安装node和npm,如果没的话先去官方下载!!!
我是全局安装的: npm install webpack -g 个人觉得最好在你的项目中也包含一份独立的 Webpack,这样你更方便管理你的项目 npm install --save-dev webpack 如果安装成功 会显示如下图

alt text

②通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。
安装webpack依赖包
安装依赖包成功 会显示下图 红色线条是路径

alt text

$ npm install webpack --save-dev
Webpack 目前有两个主版本,一个是在 master 主干的稳定版,一个是在 webpack-2 分支的测试版,测试版拥有一些实验性功能并且和稳定版不兼容,在正式项目中应该使用稳定版。
检查webpack版本
$ npm info webpack
如果需要使用 Webpack 开发工具,要单独安装:
$ npm install webpack-dev-server --save-dev

二、使用webpack

①首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js:
!-- index.html --><html><head>
  <meta charset="utf-8"></head><body>
  <script src="bundle.js"></script></body></html>
// entry.jsdocument.write('It works.')
②然后编译 entry.js 并打包到 bundle.js:
$ webpack entry.js bundle.js
③打包过程会显示日志:
Hash: e964f90ec65eb2c29bb9Version: webpack 1.12.2Time: 54ms    Asset     Size  Chunks             Chunk Namesbundle.js  1.42 kB       0  [emitted]  main
   [0] ./entry.js 27 bytes {0} [built]
④用浏览器打开 index.html 将会看到 It works. 接下来添加一个模块 module.js 并修改入口 entry.js:
// module.jsmodule.exports = 'It works from module.js.'
// entry.jsdocument.write('It works.')document.write(require('./module.js')) // 添加模块
⑤重新打包 webpack entry.js bundle.js 后刷新页面看到变化 It works.It works from module.js.
Hash: 279c7601d5d08396e751Version: webpack 1.12.2Time: 63ms
    Asset     Size  Chunks             Chunk Namesbundle.js  1.57 kB       0  [emitted]  main
   [0] ./entry.js 66 bytes {0} [built]
   [1] ./module.js 43 bytes {0} [built]
⑥Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时,会先执行 entry.js 中的代码,其它模块会在运行 require 的时候再执行。

安装webpack的教程https://v.qq.com/x/page/m0380s6tk4s.html


本文由豆瓜网专栏作家 豆瓜 投稿发布,并经过豆瓜网编辑审核。

转载此文章须经作者同意,并附上出处(豆瓜网)及本页链接。

若稿件文字、图片、视频等内容侵犯了您的权益,请联系本站进行 投诉处理

相关搜索

安装webpack
图标 图标

豆瓜

豆瓜网

豆瓜官网专栏

  • 安装webpack以及使用方法介绍
  • linux 同步时间有哪些方法

    linux 同步时间有哪些方法

    图标
    豆瓜 图标 · 今天 15:36:09 · 4浏览
  • 三目运算符java介绍

    图标
    豆瓜 图标 · 今天 15:34:31 · 8浏览
  • 全部评论

    豆瓜

    豆瓜网

    豆瓜官网专栏

  • 安装webpack以及使用方法介绍
  • linux 同步时间有哪些方法
  • 三目运算符java介绍
  • sql多表查询基本原理说明
  • ubuntu安装pip解决方案介绍
  • 我来说两句