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. WPF 实现跑马灯效果的Label控件,数据绑定方式实现

    原文:WPF 实现跑马灯效果的Label控件,数据绑定方式实现 项目中需要使用数据绑定的方式实现跑马灯效果的Label,故重构了Label控件:具体代码如下 using System; using S ...

  2. WPF太阳、地球、月球运动轨迹模拟

    原文:WPF太阳.地球.月球运动轨迹模拟 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/yangyisen0713/article/details/ ...

  3. 【LeetCode】LRU Cache 解决报告

    插话:只写了几个连续的博客,博客排名不再是实际"远在千里之外"该.我们已经进入2一万内. 再接再厉.油! Design and implement a data structure ...

  4. WPF 验证错误模板

    <Window x:Class="BindingExam.MainWindow"        xmlns="http://schemas.microsoft.co ...

  5. js 动态生成div显示id

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

  6. jquery QQ微博

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Delphi多线程下的ADO编程

    前言: 几个月前接到一个任务:将一后台程序访问数据库的方式从BDE改为ADO,原因是由于业务量的增加,通过BDE不论是向数据库写入数据还是从数据库中读出数据的速度都变得无法忍受,大家都知道ADO在数据 ...

  8. 关于阿里云centos7安装svn,客服端无法链接的问题

    阿里云的centos7的版本中,通过yum安装了subversion之后,svn客服端无法链接svn服务器. 首先确定服务器的安全组策略中的3690端口是否打开 然后确定svnserve配置是否正确, ...

  9. Linux参数调优

    一.系统参数调优 打开文件 /etc/sysctl.conf ############ # 一般服务器调整 # ############ #最大连接数 net.core.somaxconn = 327 ...

  10. 零元学Expression Blend 4 - Chapter 27 PathlistBox被Selected时的蓝底蓝框问题

    原文:零元学Expression Blend 4 - Chapter 27 PathlistBox被Selected时的蓝底蓝框问题 最近收到网友Cloud的来信,询问我有关放进PathlistBox ...