webpack 4.0 学习指南

最近前端又要变天了,vue作者推出了vue-cli 3版本,并且里面使用了webpack 4.

但是webpack 3 和webpack 4 二者的使用方式完全不一样了,今天借这个机会就简单的说手webpack3和webpack4 二者的不同之处

 A.........................安装不同...................................

  1. Webpack  3

    下载完webpack 3 之后 npm install webpack@3.8.1 要指定版本,不然下载的是最新版。

    

    我们直接使用webpack -v 就可以发现 webpack 的版本号

  2.webpack 4

    下载完webpack 4之后 npm install webpack

    

    我们再使用webpack -v 检测版本 会发现一个报错  要求我们下载webpack-cli

    我们下载完webpack-cli之后

    

    再输入webpack -v  发现就没有问题了。

B.............................打包不同.........................................................

 1. Webpack 3 打包文件 可以直接使用 webpack aa.js bb.js 

  将aa.js 打包成 bb.js 但是webpack 4 不行。

  webpack 4 需要我们去配置一些东西 因为webpack 4 默认的入口文件是 src/index.js 出口文件是dist/main.js

  所以我们需要手动创建一个dist的文件夹,里面写的文件是index.js (出口文件不用写)

  然后我们直接webpack 一下 就行了。

  

  

    我们的html文件直接引入 dist中的main.js文件就可以了。

今天就说到写到这里,关于webpack 4 在 webpack.config.js 文件的配置,我们下次分析,需要的伙伴们点个赞哈。

webpack 4.0 版本的简单使用的更多相关文章

  1. GlideDemo【Glide3.7.0版本的简单使用以及圆角功能】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本Demo主要记录Glide3.7.0版本的简单运用和实现圆角方案. 效果图 代码分析 Glide的centerCrop()和fit ...

  2. 【转】cocos2d-x 2.0版本 自适应屏幕分辨率

    http://codingnow.cn/cocos2d-x/975.html 我使用的版本是cocos2d-2.0-x-2.0.4,cocos2dx-2.0版本对多分辨率适配提供了很好的支持,使用起来 ...

  3. 【AngularJS】 2.0 版本发布

    [AngularJS] 2.0 版本发布 w5cValidator[AngularJS] 2.0 版本发布   w5cValidator 插件基于angular原有的表单验证,在原有的基础上扩展了一些 ...

  4. w5cValidator【AngularJS】 2.0 版本发布

    w5cValidator 插件基于angular原有的表单验证,在原有的基础上扩展了一些错误提示的功能,让大家不用在每个表单上写一些提示信息的模板,专心的去实现业务逻辑. 代码地址:https://g ...

  5. LitepalNewDemo【开源数据库ORM框架-LitePal2.0.0版本的使用】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本Demo使用的是LitePal2.0.0版本,对于旧项目如何升级到2.0.0版本,请阅读<赶快使用LitePal 2.0版本 ...

  6. 用Vue-cli生成vue+webpack的项目模板怎么设置为vue1.0版本?

    用Vue-cli生成vue+webpack的项目模板 $ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ ...

  7. webpack 4.0.0-beta.0 新特性介绍

    webpack 可以看做是模块打包机.它做的事情是:分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式 ...

  8. vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布

    框架介绍 这是一个基于vue.element-ui.iview..netcore3.1 可支持前端.后台动态扩展业务代码快速开发框架. 框架内置定制开发的代码生成器,生成的代码不需要复制也不需要更改, ...

  9. geotrellis使用(二十)geotrellis1.0版本新功能及变化介绍

    目录 前言 变化情况介绍 总结 一.前言        之前版本是0.9或者0.10.1.0.10.2,最近发现更新成为1.0.0-2077839.1.0应该也能称之为正式版了吧.发现其中有很多变化, ...

随机推荐

  1. EBS OAF 发展 URL商标、加密和编码

    EBS OAF 发展 URL商标.加密和编码 (版权声明.我原来的或翻译的文章,如需转载,转载的个人学习,转载请注明出处:否则,请与我联系.版权所有) 马克 当您指定页面定义声明URL参数,文本也能够 ...

  2. HDU-4249-A Famous Equation(DP)

    Problem Description Mr. B writes an addition equation such as 123+321=444 on the blackboard after cl ...

  3. .net reactor 学习系列(一)---.net reactor介绍

    原文:.net reactor 学习系列(一)---.net reactor介绍       学习.net已经一年多了,从语言的编写到框架类库的运用再到.net三大解决方案的了解(WF,WCF,WPF ...

  4. WPF中画虚线

    原文:WPF中画虚线 在WPF中,画线的方法十分简单,只要声明一个Line然后添加到指定的位置就可以了,但Line并不仅仅只能画一条直线,还可以对直线进行修饰. 1.Line.StrokeDashAr ...

  5. libuv windows 下编译及使用出现的问题(异步IO)

    1. 下载源码:http://dist.libuv.org/dist/ 我下载的是 v1.8.0 版本,打开可看见四个文件,如下: 说明:.tar.gz 版本的是可以在Linux和Windows下编译 ...

  6. PHP模拟单链表的数据结构

    <?php /*** * 单链表 */ //节点,下标,节点名称,下一个节点的地址 class Node { public $id; public $name; public $next; pu ...

  7. laravel 增删修改

    1.查 public function userTest(){ return $this->all(); } public function userTest(){ return $this-& ...

  8. 用蓝牙连接debian和诺基亚手机

    本方法已经用debian 4.0.诺基亚9300和一个hl-united牌子的USB蓝牙适配器测试过了,效果很好.             1.安装必要的软件包:   #apt-get install ...

  9. 十七 bootstrap-table tableExport 导出xlsx格式表格

    原文:十七 bootstrap-table tableExport 导出xlsx格式表格 在[十六.bootstrap-table javascript导出数据]中,打开导出的表格时,总会弹出一个提示 ...

  10. 零元学Expression Blend 4 - Chapter 36 来玩捉迷藏吧!!!看看ScrollBar的Disabled与Hidden之差异

    原文:零元学Expression Blend 4 - Chapter 36 来玩捉迷藏吧!!!看看ScrollBar的Disabled与Hidden之差异 本次要针对Disabled以及Hidden作 ...