本教程可以学习到如下内容:

1、webpack的安装

2、利用webpack命令打包js文件

3、如何在js文件里面引用css并将css文件在页面里面生效

4、学习webpack相关的高级的一些参数,使我们更清晰的看到webpack打包的过程

假设你已安装了node和npm,且已经建了项目,项目所在的根目录文件夹为webpack-study

一、package.json文件的生成

在命令窗口中敲如下命令,直接按默认回车就好

 npm init 

最后选yes 并生成了package.json文件

二、webpack的安装

1、项目安装(推荐)并在package.json里面建立依赖:

在命令窗口进入项目跟目录,建入如下命令:

npm install --save-dev webpack

2、全局安装(不推荐)

 npm install -g webpack

注意:不推荐全局安装 webpack。这会锁定 webpack 到指定版本,并且在使用不同的 webpack 版本的项目中可能会导致构建失败。

三、利用webpack命令打包js文件

1

webpack学习(一):webpack的安装和命令行的更多相关文章

  1. webpack学习(一)安装和命令行、一次js/css的打包体验及不同版本错误

    一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...

  2. Hadoop学习(5)-zookeeper的安装和命令行,java操作

    zookeeper是干嘛的呢 Zookeeper的作用1.可以为客户端管理少量的数据kvkey:是以路径的形式表示的,那就意味着,各key之间有父子关系,比如/ 是顶层key用户建的key只能在/ 下 ...

  3. Hadoop学习(6)-HBASE的安装和命令行操作和java操作

    使用HABSE之前,要先安装一个zookeeper 我以前写的有https://www.cnblogs.com/wpbing/p/11309761.html 先简单介绍一下HBASE HBASE是一个 ...

  4. Hadoop学习(7)-hive的安装和命令行使用和java操作

    Hive的用处,就是把hdfs里的文件建立映射转化成数据库的表 但hive里的sql语句都是转化成了mapruduce来对hdfs里的数据进行处理 ,并不是真正的在数据库里进行了操作. 而那些表的定义 ...

  5. 【分布式】ZooKeeper学习之一:安装及命令行使用

    ZooKeeper学习之一:安装及命令行使用 一直都想着好好学一学分布式系统,但是这拖延症晚期也是没得治了,所以干脆强迫自己来写一个系列博客,从zk的安装使用.客户端调用.涉及到的分布式原理.选举过程 ...

  6. mac安装GNU命令行工具

    mac安装GNU命令行工具 2.添加的repo     tap home/dupes        brew install coreutils  binutils  diffutils  ed -- ...

  7. 【Mac】Mac OS X 安装GNU命令行工具

    macos的很多用户都是做it相关的人,类unix系统带来了很多方面,尤其是经常和linux打交道的人. 但是作为经常使用linux 命令行的人发现macos中的命令行工具很多都是bsd工具,跟lin ...

  8. Django之win7下安装与命令行工具

    Django之win7下安装与命令行工具 下载安装 pip3 install django 注意:自动添加环境变量 测试是否安装成功 1.输入python 2.输入import django 3.输入 ...

  9. 你使用 Web 平台安装程序命令行工具

    你使用 Web 平台安装程序命令行工具 获取的软件由其所有者授权给你.Microsoft 未授予你第三方软件的任何权利.已成功加载主源: https://go.microsoft.com/?linki ...

  10. NodeJS 安装cnpm命令行工具

    在安装之前,请确保已安装Git和NodeJS. cmd机内命令窗口,输入以下命令: git config --system http.sslcainfo /bin/curl-ca-bundle.crt ...

随机推荐

  1. eclipse 大括号改为C语言一样的代码块

    如图:找到Windows->Preferences->Java->Code Style->Formatter: 然后,点击右边的Edit按钮: 按如下图完成

  2. Selenium2自动化——初体验

    一.Windows下的环境搭建 1.安装Python 访问Python官网:https://www.python.org/ 2.安装setuptools与pip setuptools是Python e ...

  3. linux系统文件被删的几种恢复方法

    参考链接:https://www.cnblogs.com/276815076/p/5703796.html 1.几种恢复方法,这里只是记录别的博客提到的方法,本人并未亲自验证. ext3用ext3gr ...

  4. 如何应对HR小姐姐的千年历史遗留问题:你为什么从上家公司离职?

    最近找我询问面试问题的学生比较多,而且问的问题基本上都是课堂上讲过的,好吧,在此心疼自己三秒钟. 那么今天就为各位宝宝们整理一下,如何优雅的回复HR小姐姐的这个千年历史遗留问题:你为什么从上家公司离职 ...

  5. Swizzling的使用

    在oc的runtime机制内有一类方法是可以用来实现类间的方法替换.解决了我们实际开发中诸多常规手段所无法解决的问题.关于Method Swizzling,这里有一篇介绍基本用法的文章 场景 最近出于 ...

  6. python语法生成器、迭代器、闭包、装饰器总结

    1.生成器 生成器的创建方法: (1)通过列表生成式创建 可以通过将列表生成式的[]改成() eg: # 列表生成式 L = [ x*2 for x in range(5)] # L = [0, 2, ...

  7. 海洋深处的数据中心——微软Natick项目

    数据中心(data center)是云计算的支柱,云计算的蓬勃发展离不开数据中心在建造运营方面的不断创新.但云端数据中心的运行过程中会产生大量热量,冷却降温过程则意味着巨大的能源消耗,这意味着需要庞大 ...

  8. 听起来很美,用起来很累!停车类APP软肋在哪

    据数据显示,全国现有汽车已达1亿7千万辆,停车位缺于6800万个.而在北京,汽车保有量和车位的配比大约是1:0.5,而国际上一般是1:1.2,结构严重失衡.正所谓哪里有需求,哪里就有市场.停车位的走俏 ...

  9. LeetCode#476 Number Complement - in Swift

    Given a positive integer, output its complement number. The complement strategy is to flip the bits ...

  10. AAAI |如何保证人工智能系统的准确性?

    ​ |如何保证人工智能系统的准确性?" title="AAAI |如何保证人工智能系统的准确性?"> ​ 注:本文译自AI is getting smarter; ...