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

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. leetcode第24题:两两交换链表中的节点

    通过分析,这属于数据结构类型题目,但涉及到多次交换,也需要算法知识. 首先,我想的是,将链表中节点相互交换. class Solution: def swapPairs(self, head: Lis ...

  2. Nginx笔记总结十三:sub_filter内容替换

    Nginx变异安装加上参数 --with-http_sub_module 配置文件: location ~* ^/portalproxy/([-]*)/portal(.*)$ { #sub_filte ...

  3. Nginx笔记总结十:Nginx日志切割

    1.Nginx日志切割 logrotate日志文件管理工具,通过cron程序定期执行,默认在cron默认程序的dayli目录下 [root@joker logrotate.d]# cat /etc/c ...

  4. 使用java列举所有给定数组中和为定值的组合

    import java.util.Arrays; public class SolveProb { ]; ;// 记录当前 public SolveProb() { } public static v ...

  5. [转]<版本一>写代码的小女孩

    天冷极了,下着雪,又快黑了.这是NOIP的前夜.在这又冷又黑的晚上,一个衣衫破烂的小女孩在机房敲着代码.她从班里逃出来的时候还拿着一本算导,但是有什么用呢?那是一本很破旧的书——那么大,一向是她妈妈垫 ...

  6. linux下光标操作

    Ctrl+左右键    单词间跳转 Ctrl+a    跳到行首 Ctrl+e    跳到行尾 Ctrl+u    删除当前光标前的文字 Ctrl+k    删除当前光标后的文字 Ctrl+w    ...

  7. Java 去掉字符串中的重复数据

    有一组字符串比如 北京,北京,上海,上海,上海,武汉-------->要得到        北京,上海,武汉 怎么去掉里面重复的字符串? function DelRepetStr(String ...

  8. 为什么就连iPhone、三星手机的电池都能出问题?

    近年来关于三星.苹果.华为等知名手机厂商电池爆炸的消息一直不断在媒体上报道.这在一定程度上引发了消费者的重度忧虑,也给这些知名手机厂商从一定程度上造成了信任危机.为何连这些知名品牌都无法避免手机电池的 ...

  9. 添砖加瓦:[OpenCV]入门(一)

    1.OpenCV安装 (1)下载: 本文采用的是源码的方式进行安装,源码可以从OpenCV官网下载.这里以3.4.1为例. (2)安装 这里下载到的文件为3.4.1.zip."unzip 3 ...

  10. MFC中文件对话框类CFileDialog详解及文件过滤器说明

    当前位置 : 首页 » 文章分类 :  开发  »  MFC中文件对话框类CFileDialog详解及文件过滤器说明 上一篇 利用OpenCV从摄像头获得图像的坐标原点是在左下角 下一篇 Word中为 ...