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

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. win10安装3DSMAX失败,怎么强力卸载删除注册表并重新安装

    一些搞设计的朋友在win10系统下安装3DSMAX失败或提示已安装,也有时候想重新安装3DSMAX的时候会出现本电脑windows系统已安装3DSMAX,你要是不留意直接安装3DSMAX,只会安装3D ...

  2. npm镜像源

    1.国内用户,建议将npm的注册表源设置为国内的镜像,可以大幅提升安装速度,先查看本机地址 npm config get registry 2.国内优秀npm镜像推荐及使用 淘宝npm镜像 ·搜索地址 ...

  3. 吴裕雄--天生自然 R语言开发学习:方差分析

    #-------------------------------------------------------------------# # R in Action (2nd ed): Chapte ...

  4. Redis 中 byte格式 写入、取出

    实体类: package com.nf.redisDemo1.entity; import java.io.Serializable; public class News implements Ser ...

  5. Time Machine 备份mac系统

    USB外接移动硬盘的方式来熟悉Time Machine,体会它带给我们的便利.O(∩_∩)O~~通过USB连接移动硬盘到MacBook Pro,如图所示 2 将移动硬盘连接到 Mac 时,系统有时会询 ...

  6. Android编程权威指南第三版 第32章

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_35564145/article/de ...

  7. Python实现链表倒序(带头指针)

    class ListNode(object): def __init__(self, x): self.val = x self.next = None def reverseList(self, h ...

  8. Python不使用元类创建缓存实例

    问题 当创建类实例时我们想返回一个缓存引用,让其指向上一个用同样参数(如果有的话)创建出来的类实例. 这个问题常常出现在当我们想确保针对一组输入参数只会有一个类实例存在时. 解决方法: 使用一个与类本 ...

  9. 会编程的 AI + 会修 Bug 的 AI,等于什么 ?

    2017-02-25 Python开发者 (点击上方公众号,可快速关注) 关于人工智能未来的畅想,除了家庭服务机器人,快递无人机,医用机器人等等,Lucas Carlson 认为人工智能在另外一个领域 ...

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

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