刚学习了Webpack,ememememememememem就赶脚是一个打包工具,将js、css、json、img等等通通打包为最终的文件,最后渲染为一个页面。

  

  也是终于捋清了Webpack的思路,在这里分享一下:

    学习Webpack之前首先要知道Webpack是什么?它有什么作用?

      Webpack是一个前端资源打包工具

      Webpack它会将你的项目看作是一个整体,通过一个给定的主文件,寻找到所依赖的所有分支文件,通过lorder处理为浏览器能够识别JavaScript文件

    知道它的作用之后我们就需要在nodejs来操作了

      首先我们在一个新文件夹中来利用nodejs创建package.json文件

      在nodejs中输入 npm init创建,如下图:

    创建完毕之后,我们再安装Webpack

    首先是全局的安装(注:我安装的是3.8.1的版本),如下图:

      输入的指令为:npm install -g webpack@3.8.1

      

    然后我们在下载当前的文件下:

      指令为:npm install webpack@3.8.1

    这种局部下载和全局下载是一样的,一个是在任何地方都可以使用,一个只能在当前文件下使用,就不贴图了。

    这下我们就可以打包js文件了,打包的指令为 webpack  入口文件名称  出口文件名称

      其中index.js为入口文件   rundle.js为出口文件

    这就完成了js文件的打包,但是这种打包指令如果有多个js的话会比较麻烦,这就需要我们用一种快捷方式来将它打包,这时我们就需要配置一个webpack.config.js文件,在文件夹中创建此文件,然后再里面配置内容,如下图:

    

    这时我们在nodejs中输入webpack,就会发下dist文件下有一个打包出来的js文件

    

    

  这样我们就完成了js文件的打包,接下来我们对css文件的打包,这时我们需要下载css打包所需要的文件:

    在nodejs输入如下指令:

      npm install style-loader css-loader --save -dev

    

    如上我们下载完毕之后,在webpack.config.js文件中添加如下指令:

    这样我们可以将css文件打包了,还可以将json文件、img图片打包(暂时还没学习,后续将会更新)

    接下来我们在来说一下热加载,就是将文件内容改变之后保存就会自动改变打包后的文件,不需要再进行繁琐的配置

    还是需要先下载:

      注意:webpack是3.8.1 这个轻量服务器就得是2.9.4 如果webpack是4.0版本,这个dev-server就得是3.0版本

      在nodejs输入如下指令:

        也是如上需要一遍全局下载,一遍局部下载

        npm install webpack-dev-server@2.9.4

      

 

  配置完毕之后我们还需要在packjson中文件中添加如下代码:    

    

   接下来在nodesj中输入指令npm run dev,就可以启动了

   然后我们创建一个app.css文件、index.html文件和aaa.js文件,在css中输入body:{background:red},将css文件和js文件打包,引入到html文件中

    

    

    

    

    注意:在html中引入的js文件为虚拟js文件,只是方便我们做项目时使用,最后我们将所有工作都做完以后再打包的js文件,才会使用真实文件

    最后我们在浏览器中打开html文件,输入localhost:8080/文件名称(注意:8081为nodejs中启动服务器时给出的地址)

    

    

    然后我们改变css样式,保存之后浏览器就会发生相应的改变,其它文件相同。

    不用这种方式的话,改变一次css或js样式就需要重新打包一次文件,相对来说较为繁琐。

    以上如有错误的地方还请见谅!

关于Webpack的的认识及傻瓜式教学的更多相关文章

  1. Git添加远程库和从远程库中获取(新手傻瓜式教学)

    一.    Git添加远程库 1.在本地新建一个文件夹,在该文件夹使用Git工具,运行$ git init,将该文件夹变为本地Git仓库,同时会生成一个隐藏的.git文件夹. 2.在该文件夹中用Not ...

  2. IntelliJ IDEA 下的SVN使用(傻瓜式教学)(转)

    第一步:下载svn的客户端,通俗一点来说就是小乌龟啦!去电脑管理的软件管理里面可以直接下载,方便迅速 下载之后直接安装就好了,但是要注意这里的这个文件也要安装上,默认是不安装的,如果不安装,svn中的 ...

  3. 傻瓜式教学--win10 + frp + rdpwrap + 阿里云服务器 --实现win10 多用户同时远程登录内网机

    概述: 使用win10 专业版 + frp + RDPwrap + 阿里云服务器 的组合实现win10 多用户同时远程登录内网机.使用frp 做内网穿透,将内网机的指定端口暴露在外网,通过ip+por ...

  4. ES6新特性之傻瓜式说明

    ES6出来挺长一段时间了,但目前网上好像教程并不多也不详细.我依然遵循傻瓜式教学模式,白话文说明JavaScript和ES6的一些区别,说明下ES6的一些新特性.本文适合新手学习,大神请勿见笑,在下在 ...

  5. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  6. Webpack 傻瓜式指南(一)

    modules with dependencies   webpack   module bundler   static  assetss   .js .js .png Webpack傻瓜式指南 n ...

  7. Webpack傻瓜式指南(转)

    add by zhj: 作者写了三篇文章,这是第一篇幅,另外两篇参见 https://zhuanlan.zhihu.com/p/20397902 https://zhuanlan.zhihu.com/ ...

  8. webpack之傻瓜式教程及前端自动化入门

    原文地址:https://www.cnblogs.com/liqiyuan/p/6246870.html 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天 ...

  9. NOSDK--关于android傻瓜式的分包设想

    一直以来,我总是以“够用就好”为理由,很少再维护过自己的一键打包的项目.最近接触了棱镜的sdk,感觉将apk包上传到棱镜服务器,后台来进行分包这种简单的方式很招人待见. 原理似乎不难,apk即zip压 ...

随机推荐

  1. Wireshark抓包工具的简单使用2(抓包、查看、过滤)

    在简单了解了Wireshark的界面以及各工具栏的作用后,也要掌握如何进行抓包,查询,过滤等操作 一.抓包 1.打开软件,初始界面 2.点击Caputre-->Interfaces,出现当前所有 ...

  2. 二元决策图(Binary decision diagram)

    修一门写作课题目是Binary decision diagram.在网上查了些资料感觉说的都不是很清楚,看了半天还是很困惑,这到底是个啥?到底咋使?于是决定写下这篇随笔,总结一下看过的各种资料加上自己 ...

  3. POJ-2594 Treasure Exploration floyd传递闭包+最小路径覆盖,nice!

    Treasure Exploration Time Limit: 6000MS   Memory Limit: 65536K Total Submissions: 8130   Accepted: 3 ...

  4. 破损的键盘(codevs 4650)

    题目描述 Description 有一天,你需要打一份文件,但是你的键盘坏了,上面的"home"键和"end"键会时不时地按下,而你却毫不知情,甚至你都懒得打开 ...

  5. Linux下汇编语言学习笔记56 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  6. 2019.4.1今日一练String类中的方法

    package com.pjc.objects;                        replaceAll()方法的理解引出正则表达式import java.util.regex.Patte ...

  7. oracle的processes和session最大限制

    1.现象:oracle运行了一段时间后出现用户名连接不上,提示process已经达到最大值. 2.解决: --管理员身份登录 sqlplus / as sysdba --修改processes最大值, ...

  8. 电脑无线WIFI怎么共享给手机

    点屏幕右下角的那个小电脑(网络)标志,里面有打开网络和共享中. 选左上角管理无线网络——选择添加. 选择创建临时网络——点击下一步——输入网络名称. 安全类型选择WEP——安全密钥为10位数字——然后 ...

  9. 介绍css 的3D 变换(3D transform)

    https://desandro.github.io/3dtransforms/docs/card-flip.html ---------------------------------------- ...

  10. CSS Modules 解决 react 项目 css 样式互相影响的问题

    1. CSS Modules引入目的 写过CSS的人,应该都对一大长串选择器选中一个元素不陌生吧,这种方式,其实定义的就是全局样式,我们时常会因为选择器权重问题,没有把我们想要的样式加上去. 另外,每 ...