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. 图像处理与计算机视觉的 topics

    光学图像(optical image): the apparent reproduction of an object, formed by a lens or mirror system from ...

  2. zcelib - One cplusplus C++ crossplatform library use for develop server,similar to ACE.

    zcelib - One cplusplus C++ crossplatform library use for develop server,similar to ACE.OS适配层,为了适应WIN ...

  3. DNS查询工具:host、nslookup、dig

    作者:zhanhailiang 日期:2014-11-01 1. host host提供域名到IP地址的双向解析: host默认通过/etc/resolv.conf读取Name Server来解析,除 ...

  4. Oracle 已有则更新,没有则插入

    使用merge merge into 表名 t1 using (select '数据数据' 字段1,'数据数据' 字段2 from dual) t2 on (t1.字段1 = t2.字段1) when ...

  5. .NET Core 3.0 Preview 5 亮点之一:发布单文件可执行程序

    在阅读 Announcing .NET Core 3.0 Preview 5 时发现了 .NET Core 3.0 Preview 5 的一个新特性 —— Publishing Single EXEs ...

  6. wpf border内部元素内边角溢出问题 裁剪效果

    效果图 <Grid> <Border BorderThickness=" BorderBrush="#3c4d72" CornerRadius=&quo ...

  7. WPF GridSplitter最好设置HorizontalAlignment和VerticalAlignment,否则不可以左右移动

    <Window x:Class="XamlTest.Window5"        xmlns="http://schemas.microsoft.com/winf ...

  8. Gralde 网络代理

    Gralde 网络代理 Gradle在编译项目的时候,需要下载一些依赖.墙外的网络就需要设置代理了. 设置的方法,见文档: Accessing the web through a HTTP proxy ...

  9. Win8Metro(C#)数字图像处理--2.23二值图像开运算

    原文:Win8Metro(C#)数字图像处理--2.23二值图像开运算  [函数名称] 二值图像开运算函数OpenOperateProcess(WriteableBitmap src) [算法说明 ...

  10. WinForm TreeView单击,但是获取的是上一次点击选中的节点

    /// <summary> /// MouseDown是鼠标按下事件发生在你鼠标单击事件之前,你单击鼠标发生了两个动作,一是鼠标按下二是鼠标抬起.执行之后,就会把SelectedNode转 ...