webPack 也更新到了4.0阶段,今天看了一下官网,总结一下,零基础的学习路径吧。

(1)首先需要下载 webPake和webpack cli

npm install  webpack webpack-cli

(2)下载完之后,则是建立新的文件夹,进行初始化

//webpack 初始化
npm init

(3)完成之后,则是从零配置webpack  需要在根目录下,建立一个 webpack.config.js 的文件,里面用来写webpack 的配置

(4)配置webpack 因为webpack 是基于node.js 运行的,所以首先需要在文件里配置

(5)众所周知,webpack 的工作机制就是把一堆文件打包成 浏览器所认识的html 和js 和 css,那么就需要打包的入口文件和打包之后的出口文件夹啊

mode: "production", //模式有两种  production development
entry: './src/index.js', //入口
output: {
filename: "build.js", //打包后得文件名 [hash:8] 文件名只显示hash得前8位
path: __dirname + '/build', //绝对路径
},

 这里的注释都相当清楚了,所以就不一一解释了,production 是生产模式(也就是上线的版本);development 是开发模式

(6)到了这一步,最基础的就完成了,我们就可以做一个测试了,新建一个src文件夹,在里面建立一个index.js ,输入一点东西,然后运行webpack 则会看见他自动打包成buil文件夹,并在里面生成index.js

 这个意味着打包成功

(7)但是是不是有什么不对呢?哪里不对劲呢?如果我想让他生成index.html文件呢?怎么生成?------那么就需要用到插件了

html-webpack-plugin 这个插件可以在build 文件夹下自动生成index.html  (首先我们需要在命令行中下载这个插件 然后再将其配置到webpack.config.js文件中)  
//下载插件
npm add html-webpack-plugin

然后则是在配置文件中进行引用

plugins  这个属性是放置所有用到的插件

运行成功之后则会自动加载出文件(并且还会主动引入build 文件夹下面的js 文件)

(8)那么如果又css 文件呢?哪有改如何去打包呢?中间又会涉及到那些问题呢?

css 文件,我们就需要用到 loader (他的作用就是将浏览器不认识的文件转换成所认识的js或css文件)

loader 的工作机制顺序是: 从右向左,从上往下

css 文件中,我们用到的是 css-loader 和style-loader 所以我们应该先下载下来,然后再进行配置

这里我们需要注意的是,在src 文件中,我们在index.js 中引入css 文件时应该用 require 的方式来引入

这样我们可以见已经打包成功了

(9)那么,问题又来了,既然js 都可以单独打包成一个文件,css 是不是也可以呢

mini-css-extract-plugin  这个插件,则是会主动生成一个css 文件,将其插入在 link 标签里面    之后我们需要的就是在配置文件中进行配置就ok了

(10)仔细的你会发先又有个小小的问题(就是即使在生产模式下,js 文件被压缩成一行了,但是生成的css 却没有呢?这又怎么解决呢)

这时候需要两个插件来解决

let OptimizeCss = require('optimize-css-assets-webpack-plugin'); //这个插件可以压缩css文件
let UglifyJs = require('uglifyjs-webpack-plugin') //有了css 压缩必须加上这个js压缩 不然 js 文件不会别压缩

(11)这些都弄完了,那么如果是时css 文件中又图片呢? js 文件中有图片呢?那咋整?咱下次再接着说。。。

(12)咦~ 插播一个小小的知识点,大家都知道vue 是集合了webpack 的,打包时直接 npm run build  就好了,那你知道咋配置的吗?

OK,这次真拜拜了~~~~

webPack 4.0的零基础学习的更多相关文章

  1. [原]零基础学习SDL开发之在Android使用SDL2.0显示BMP图

    关于如何移植SDL2.0到安卓上面来参考我的上一篇文章:[原]零基础学习SDL开发之移植SDL2.0到Android 在一篇文章我们主要使用SDL2.0来加载一张BMP图来渲染显示. 博主的开发环境: ...

  2. [原]零基础学习SDL开发之在Android使用SDL2.0显示BMP叠加图

    关于如何移植在android上使用SDL,可以参考[原]零基础学习SDL开发之移植SDL2.0到Android 和 [原]零基础学习SDL开发之在Android使用SDL2.0显示BMP图 . 在一篇 ...

  3. HTML5零基础学习Web前端需要知道哪些?

    HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...

  4. [原]零基础学习视频解码之android篇系列文章

    截止今天,<零基础学习视频解码系列文章>.<零基础学习在Android进行SDL开发系列文章>以及<零基础学习视频解码之android篇>系列文章基本算是告一段落了 ...

  5. [原]零基础学习在Android进行SDL开发系列文章

    [原]零基础学习SDL开发之移植SDL2.0到Android [原]零基础学习SDL开发之在Android使用SDL2.0显示BMP图 [原]零基础学习SDL开发之在Android使用SDL2.0显示 ...

  6. 零基础学习hadoop到上手工作线路指导

    零基础学习hadoop,没有想象的那么困难,也没有想象的那么容易.在刚接触云计算,曾经想过培训,但是培训机构的选择就让我很纠结.所以索性就自己学习了.整个过程整理一下,给大家参考,欢迎讨论,共同学习. ...

  7. MongoDB实战开发 【零基础学习,附完整Asp.net示例】

    MongoDB实战开发 [零基础学习,附完整Asp.net示例] 阅读目录 开始 下载MongoDB,并启动它 在C#使用MongoDB 重构(简化)代码 使用MongoDB的客户端查看数据 使用Mo ...

  8. 零基础学习iOS开发

    零基础学习iOS开发不管你是否涉足过IT领域,只要你对iOS开发感兴趣,都可以阅读此专题. [零基础学习iOS开发][02-C语言]11-函数的声明和定义 摘要: 在上一讲中,简单介绍了函数的定义和使 ...

  9. salesforce零基础学习(八十)使用autoComplete 输入内容自动联想结果以及去重实现

    项目中,我们有时候会需要实现自动联想功能,比如我们想输入用户或者联系人名称,去联想出系统中有的相关的用户和联系人,当点击以后获取相关的邮箱或者其他信息等等.这种情况下可以使用jquery ui中的au ...

随机推荐

  1. .net core中使用Bumblebee架设微服务网关

    Bumblebee是款基于.net core开发开源的http服务网关,经过最近版本的完善在功能足以满足作为微服务网关的需要.在微服务网关功能中它提供了应用服务负载,故障迁移,安全控制,监控跟踪和日志 ...

  2. CSS技巧 (1) · 结构和布局

     前言 这一篇主要是总结关于结构和布局的一些技巧,不管什么,一个网页上来,最重要的是先确定他的结构和布局,实现基本的布局之后,我们再进行局部的优化和交互特效. 这一篇主要讲 关于 自适应内部元素 的内 ...

  3. 写了那么多年 Java 代码,终于 debug 到 JVM 了

    继上篇文章 原创 | 全网最新最简单的 openjdk13 代码编译 之后,我们有了自己编译后的 jdk 和 hotspot,如下图所示.接下来就来干一番事情. 搭建调试环境 1.下载 CLion 软 ...

  4. 《Windows内核分析》专题-索引目录

    该篇博客整理了<Windows内核分析>专题的各篇博文,方便查找. 一.保护模式 二.进程与线程 [Windows内核分析]KPCR结构体介绍 (CPU控制区 Processor Cont ...

  5. 02-16 k近邻算法

    目录 k近邻算法 一.k近邻算法学习目标 二.k近邻算法引入 三.k近邻算法详解 3.1 k近邻算法三要素 3.1.1 k值的选择 3.1.2 最近邻算法 3.1.3 距离度量的方式 3.1.4 分类 ...

  6. js 判断对象是否为空

    利用JSON.stringify var objData = {};JSON.stringify(objData) ==="{}" // true 第二种用原声js 方法 Obje ...

  7. [ZJOI2006]物流运输trans

    Description 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线,以便对整个运输过程实施严格 ...

  8. Java 语言的发展史

    维基百科引入 早期的Java 语言最开始只是Sun计算机(Sun MicroSystems)公司在1990年12月开始研究的一个内部项目.Sun计算机公司的一个叫做帕特里克·诺顿的工程师被公司自己开发 ...

  9. 第10项:重写equals时请遵守通用约定

      重写equals方法看起来似乎很简单,但是有许多重写方式会导致错误,而且后果非常严重.最容易避免这类问题的办法就是不覆盖equals方法,在这种情况下,类的每个实例都只能与它自身相等.如果满足了以 ...

  10. Neo4j:图数据库GraphDB(一)入门和基本查询语句

    图数据库的代表:Neo4j 官网:  http://neo4j.com/ 引言:为什么使用图数据库 在很多新型项目中,应用图数据库已经是势在必行的趋势了,因为图数据库可以很好的表示各种节点与关系的概念 ...