npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题;

常见的使用场景有以下几种:

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
nodejs的官网地址:https://nodejs.org/en/
nodejs中文网地址:http://nodejs.cn/
1.从node.js官网下载最新安装包进行安装
2.windows系统下,windows+R调出命令,输入cmd,打开命令工具,检测npm是否安装:输入命令:npm -v
 
3.使用npm安装webpack:输入命令:npm install webpack -g
 

将webpack安装到全局环境中

4.输入命令:webpack -v,查看当前webpack的版本号

5.进入项目目录,输入命令:npm init,生成package.json文件

package.json的文件内容:

6.输入命令:npm install webpack --save-dev为项目添加webpack依赖

7.创建一个静态文件hello.js,里面包含一个hello函数和通过require引入world.js

 

运行命令之前,hello.bundle.js不存在

运行命令:webpack hello.js hello.bundle.js,将hello.js编译并打包到hello.bundle.js

hello.bundle.js文件内容如下:

Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块

运行过程中如果出现:webpack:command not found,请检查是否在全局环境下安装webpack,全局环境下安装webpack使用命令:npm install webpack -g

接下来就要开始学习loader了:webpack前端构建工具学习总结(二)之loader的使用

webpack前端构建工具学习总结(一)之webpack安装、创建项目的更多相关文章

  1. webpack前端构建工具学习总结(二)之loader的使用

    Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...

  2. webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

    接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...

  3. webpack前端构建工具学习总结(三)之webpack.config.js配置文件

    Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...

  4. 前端读者 | 前端构建工具Gulp

    @羯瑞 整理 前言 前端工具现在层出不穷,网上搜下一大片,就看你怎么去使用了,基于项目看用什么样的构建工具.有的工具提供的功能还是非常强大的. FIS.百度团队的产品.现在百度的多个产品中使用.面向前 ...

  5. 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  6. 前端构建工具gulp使用

    前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...

  7. 前端构建工具gulp

    前端构建工具gulp使用   前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...

  8. JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  9. FIS构建工具学习(一)

    一.FIS是什么 在做项目的时候,用到部门内部前端人员开发的fiskit构建工具,经过这次项目基本把它的配置弄清楚了,fiskit构建工具是基于FIS的,所以自己也准备学习FIS,以便更好的理解. 后 ...

随机推荐

  1. IT网址大全

    图像处理 [素材]   在线作图 [素材]   思缘设计论坛 [素材]   ps联盟 [素材]   ps学习网 [素材]   ps教程论坛 [素材]   ps爱好者 [素材]   46ps [素材] ...

  2. Codeforces-B-Divisors of Two Integers(思维技巧)

    Recently you have received two positive integer numbers xx and yy. You forgot them, but you remember ...

  3. 在Javascript中 声明时用"var"与不用"var"的区别

    http://www.cnblogs.com/juejiangWalter/p/5725220.html var num = 0;function start() {    num = 3;} 只要一 ...

  4. pl/sql declare loop if

    -- 1.判断表是否存在,如果存在则drop表 -- 2.创建表 -- 3.插入1W条数据 -- 4.每1K条commit一次 declare v_table ):='STUDENT'; --表名 v ...

  5. 在MD中使用Emoji

    mark语法中支持emoji表情 具体语法是:emoji: 比如我输入 :smile: 就会出现微笑

  6. 2.4 Rust Ownership

    What Is Ownership ownership这个单词有些不好翻译,刚开始就直接叫它“ownership”即可.这里简单说一下,我对它的理解, 从“数据结构与算法”的角度来看,ownershi ...

  7. Vue.js-----轻量高效的MVVM框架(十二、组件动态切换)

    在写html的过程中,我们经常会遇到要写tabs的切换,类似于这样: 在vue中,我们也有自己的组件和属性来实现这样的效果,这个东西我们叫做动态组件. html: <h3>动态组件< ...

  8. c++ for_each( )学习

    for_each()事实上是個 function template,其实质如下  [effective STL item 41] template<typename InputIterator, ...

  9. 几个单元素Loading动画解构

    这个账号建了也有1个多月,拖延症患者终于下定决心开始写博.做前端从前至后差不多1年时间,如果文中有什么纰漏欢迎指出,未来的路还很长~ 第一篇文章用来解构几个挺不错的单元素Loading动画.效果图如下 ...

  10. C#取得程序的根目录以及判断文件是否存在

    一:获取根目录的方法 取得控制台应用程序的根目录方法方法1.Environment.CurrentDirectory 取得或设置当前工作目录的完整限定路径方法2.AppDomain.CurrentDo ...