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. Oracle 一些实用的DBA语句

    --查询LOB的大小和所在表空间 SELECT A.TABLE_NAME, A.COLUMN_NAME, B.SEGMENT_NAME, B.SEGMENT_TYPE, B.TABLESPACE_NA ...

  2. Windows中点击“关闭”button发生了什么?

    对于Windows操作,当用户点击"关闭"button时,窗体函数就会收到一个WM_DESTROY消息. 窗体函数应该调用PostQuitMessage(0) 向消息队列插入一个W ...

  3. windows下编译qt的mysql驱动

    windows下编译qt的mysql驱动cd %QTDIR%\src\plugins\sqldrivers\mysqlqmake –o Makefile INCLUDEPATH+="C:\M ...

  4. 从加载DLL的中获取放置于Resources文件夹中资源字典的几种方法

    原文:从加载DLL的中获取放置于Resources文件夹中资源字典的几种方法 主程序 为 Main_Test.exe 被加载的DLL 为 Load_Test.dll  此DLL 中 有一个 文件夹Re ...

  5. opengl编程指南 第七版 源代码bug Page35 lines.c 红宝书

    问题1:根据源代码时,我发现的时候去敲门.不正确实施效果.哪里是不正确?没有源代码glPushAttrib(GL_LINE_STIPPLE) glPopAttrib().所以会出现最后的下一次抽奖提供 ...

  6. 知乎C++问题整理

    如何平衡性能,合理选择C++STL集装箱? ANSER: 首先要搞清楚,假设STL问题,那么问题出在哪里? STL能够简单地觉得就是算法+数据结构,全部容器的算法选择和实现都是经过精心设计和严格測试的 ...

  7. Android Fragment——详细解释

    1.Fragment概述 在一个Activity中. Fragment代表UI的一个部分或者一个行为.一个Activity能够结合多个Fragment对象,也能够在多个activity中使用同样Fra ...

  8. Swift是一个提供RESTful HTTP接口的对象存储系统,目的是为了提供一个和AWS S3竞争的服务

    Swift是一个提供RESTful HTTP接口的对象存储系统,最初起源于Rackspace的Cloud Files,目的是为了提供一个和AWS S3竞争的服务. Swift于2010年开源,是Ope ...

  9. 一台虚拟机配置nginx反向代理+3个apache虚拟主机

    三个虚拟主机通过一张网卡添加三个IP来实现 一.安装nginx 1.解决依赖 [root@xuegod1 ~]# yum groupinstall "Development Tools&qu ...

  10. jQuery省市联动

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...