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. 零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果

    原文:零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果 又来一篇五分钟做设计啦~ 本篇将教大家如何运用Design内建工具Blend Path ...

  2. python解决urllib2乱码问题

    示例: #!/usr/bin/env python # -*- coding: utf-8 -*- import urllib import urllib2 def main(): url = &qu ...

  3. Spring Boot MyBatis 通用Mapper插件集成 good

    看本文之前,请确保你已经在SpringBoot中集成MyBatis,并能正常使用.如果没有,那么请先移步 http://blog.csdn.net/catoop/article/details/505 ...

  4. Angular路由守卫 canActivate

    作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...

  5. ORACLE 时间加减操作

    DATE和timestamp类型都可以进行加减操作.可以对当前日期加年.月.日.时.分.秒,操作不同的时间类型,有三种方法: 1 使用内置函数numtodsinterval增加小时,分钟和秒2 加一个 ...

  6. JS超链接动态显示图片

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. Android Camera2拍照(一)——使用SurfaceView

    原文:Android Camera2拍照(一)--使用SurfaceView Camera2 API简介 Android 从5.0(21)开始,引入了新的Camera API Camera2,原来的a ...

  8. php 二维数组相同值 相加

    array(3) { [0]=> array(2) { ["sourcesid"]=> int(1) ["addusernum"]=> str ...

  9. SQL Server 2016新特性:DROP IF EXISTS

    原文:SQL Server 2016新特性:DROP IF EXISTS  在我们写T-SQL要删除某个对象(表.存储过程等)时,一般会习惯先用IF语句判断该对象是否存在,然后DROP,比如: 旧 ...

  10. 中资收购美新半导体,为何能通过CFIUS审查(其实是国内公司,技术水平国内领先,和国际仍有差距)

    日前,华灿光电发布公告称,旗下子公司和谐光电收购美国美新半导体终获得CFIUS审查通过.这是中资收购豪威科技.图芯科技等公司之后,再次从美国成功收购半导体企业.而且本次中资收购美新半导体还是在特朗普上 ...