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

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. 吴裕雄--天生自然python学习笔记:Python3 XML 解析

    什么是 XML? XML 指可扩展标记语言(eXtensible Markup Language),标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言. XML 被设计用来传输和存 ...

  2. 吴裕雄--天生自然HTML学习笔记:HTML 列表

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. VRRP笔记三:配置keepalived为实现haproxy高可用的双主模型配置文件示例:

    说明:其基本实现思想为创建两个虚拟路由器,并以两个节点互为主从. ! Configuration File for keepalived global_defs { notification_emai ...

  4. Nginx笔记总结十三:nginx 正向代理

    server { listen ; location / { resolver 202.106.0.20 202.106.119.116; resolver_timeout 30s; proxy_pa ...

  5. YY孵化虎牙,陌陌收购探探:你更看好谁?

    近日欢聚时代公布了2017第四季财报和全年财报,表现不错.其CFO 金秉表示,虎牙最近向美国证券交易委员会(SEC)提交了注册上市申请书草案文件,可能会在美国IPO上市,以便获取自己的投资者群体以融资 ...

  6. POJ 3041 Asteroids 二分图之最大匹配

    题意:在一个网格中有若干个点,每一次可以清除一行或者一列,问最少几次可以将网格中的点全部清除. 思路:这个题是一个入门的最大匹配题(这个好像不是思路..).一般的方式就是将 行 看作集合A,列 看作集 ...

  7. python 内置方法、数据序列化

    abc(*args, **kwargs) 取绝对值 def add(a,b,f): return f(a)+f(b) res = add(3,-6,abs) print(res) all(*args, ...

  8. 网络爬虫url跳转代码

    from bs4 import BeautifulSoup from urllib.request import urlopen import re import random base_url = ...

  9. Allenmind's Blog

    听说,Sass和Compass更配哟.来看看Compass的基本用法! 目录 Compass和Sass 安装Compass 项目初始化 编译 Compass的模块 Compass的Helper函数 一 ...

  10. 压力测试(三)-自定义变量和CSV可变参数实操

    1.Jmeter用户自定义变量实战 简介:什么是用户自定义变量,怎样使用 为什么使用:很多变量在全局中都有使用,或者测试数据更改,可以在一处定义,四处使用 比如服务器地址 1.线程组->add ...