一、初识webpack

1、什么是webpack?

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用

2、webpack工作的方式

把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件

3、作用

模块化:让我们可以把复杂的程序细化为小的文件;

打包:可以把多个Javascript文件打包成一个文件,减少服务器压力和下载带宽。

转换:把拓展语言转换成为普通的JavaScript,让浏览器顺利运行。

优化:前端变的越来越复杂后,性能也会遇到问题,而WebPack也开始肩负起了优化

和提升性能的责任。

二、webpack与gulp、Grunt的区别

webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具

三、webpack的打包流程

webpack是建立在module之上进行打包的

四、webpack基本配置

五、webpack4.0的安装

1、全局安装

cnpm install webpack webpack-cli -g

注意:不建议全局安装。

2、局部安装

npm init //初始化项目cnpm install webpack webpack-cli -D  // -D等价于--save-dev

3、webpack-cli的作用

可以让我们在命令行中正确的使用webpack  以及npx webpack 等命令 如果不安            装则无法使用

4、文件编译

npx webpack index.js

5、npx

npx :会帮助我们在当前目录下面的node_modules包中找到webpack进行使用

npx webpack -v //查看webpack版本号npx info webpack //查看webpack以往的一些版本号npx webpack <文件名称>  //文件编译

六、预热:文件编译

1、webpack默认是基于webpack.config.js进行打包的,如果需要指定其他文件名称

进行打包可以按照如下这样书写

npx webpack --config <文件名称>

2、npm scripts

如果在npm scripts中使用webpack的情况下会优先在工程目录下面的                               node_modules中找相关的依赖

如果我们的编译命令过于复杂那么我们可以在package.json中的scripts中进行简化

配置

{  "name": "myapp",  "version": "0.1.0",  "private": true,  "scripts": {    "serve": "vue-cli-service serve",    "build": "vue-cli-service build"  }}

运行命令的时候只需要npm run <命令名称即可>

3、webpack打包环境

module.exports = {    mode:"production" //生产环境    model:"development"//开发环境}

4、预热打包配置

1、npm init -y 生成一个node包

2、局部安装webpack

3、建立webpack.config.js

4、配置webpack.config文件

output:{    //占位符 满足线上地址的需求    publicPath:'html://cdn.com/'}

七、什么是开发环境、测试环境、生产环境

1、开发环境:项目尚且在编码阶段,我们的代码一般在开发环境中 不会在生产环

境中,生产环境组成:操作系统 ,web服务器 ,语言环境。  php 。 数据库 等等

2:测试环境:项目完成测试,修改bug阶段

3:生产环境:项目数据前端后台已经跑通,部署在阿里云上之后,有客户使用,

访问,就是网站正式运行了。

三个环境也可以说是系统开发的三个阶段:开发->测试->上线

4:--save && --save-dev的区别

可分别将依赖(插件)记录到package.json中的dependencies和                                  devDependencies    下面。

dependencies下记录的是项目在运行时必须依赖的插件,常见的例如react jquery         等即及时项目打包好了、上线了,这些也是需要用的,否则程序无法正常执行

devDependencies下记录的是项目在开发过程中使用的插件,一旦项目打包发布、          上线了之后,devDependencies中安装的东西就都没有用了

如果模块是在开发环境中使用,那么我们安装依赖的时候需要--dev

飞机票:https://mp.weixin.qq.com/s/g6tUSLy0f40pmFnfO3QykA

【webpack4.0】---webpack的基本使用(一)的更多相关文章

  1. webpack4.0.1安装问题和webpack.config.js的配置变化

    The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webp ...

  2. [转]webpack4.0.1安装问题和webpack.config.js的配置变化

    本文转自:https://blog.csdn.net/jiang7701037/article/details/79403637 The CLI moved into a separate packa ...

  3. webpack工具学习 构建简单vue项目(不依赖vue-cli) webpack4.0

    目的用webpack构建简单前端项目 1.npm init   (npm init -y)  形成package.json 2.npm install --save-dev webpack  形成 n ...

  4. 史上最走心webpack4.0中级教程——配置之外你应该知道的事

    <webpack4.0各个击破系列>适合不满足于只会配置webpack但一时间又看不懂源码的中级读者.我没法保证这个系列是最好的,但至少能保证每一篇博文都跟那些Ctrl+C和Ctrl+V的 ...

  5. webpack4.0各个击破(1)—— html部分

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  6. webpack4.0各个击破(2)—— CSS篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  7. webpack4.0各个击破(3)—— Assets篇

    目录 一. Assets资源的基本处理需求 二. webpack处理引用资源 2.1 资源打标 2.2 引用优化 2.3 sprites雪碧图合成 2.4 图片压缩及其他 webpack作为前端最火的 ...

  8. webpack4.0各个击破(4)—— Javascript & splitChunk

    目录 一. Js模块化开发 二. Js文件的一般打包需求 三. 使用webpack处理js文件 3.1 使用babel转换ES6+语法 3.2 脚本合并 3.3 公共模块识别 3.4 代码分割 3.5 ...

  9. webpack4.0各个击破(5)—— Module篇

    webpack4.0各个击破(5)-- Module篇 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决 ...

随机推荐

  1. 手把手教你如何使用 webpack5 的模块联邦新特性

    想象一下,在webpack5还没出来前,前端使用第三方组件库,例如使用 dayjs 日期处理库,都是通过 npm i dayjs -s 安装 dayjs 模块到项目里,然后就可以通过 require ...

  2. 【LeetCode】1472. 设计浏览器历史记录 Design Browser History (Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 模拟法 日期 题目地址:https://leetcod ...

  3. 【LeetCode】Pascal's Triangle II 解题报告

    [LeetCode]Pascal's Triangle II 解题报告 标签(空格分隔): LeetCode 题目地址:https://leetcode.com/problems/pascals-tr ...

  4. Globally-Robust Neural Networks

    目录 概 主要内容 代码 Leino K., Wang Z. and Fredrikson M. Globally-robust neural networks. In International C ...

  5. BL8810|USB2.0高速闪存读卡器芯片|BL8810规格书

    1.说明 BL8810是一款USB 2.0读卡器控制器,采用高度集成的单芯片解决方案,旨在提供USB2.0和SD.SDHC.mini SD.Micro SD(T-Flash)接口规范之间的高速数据传输 ...

  6. 替代联阳IT6564方案|CS5262替代IT6564|设计DP转HDMI+VGA扩展坞方案

    联阳IT6564:带嵌入式MCU的单芯片4通道DisplayPort1.2到HDMI2.0/VGA转换器 联阳IT6564是一种高性能的单芯片显示端口到HDMI和VGA转换器.IT6564FN结合Di ...

  7. Java中的构造方法「注意事项」

    构造方法是专门用来创建对象的方法,当我们通过关键字new来创建对象时,其实就是调用构造方法. 语法: public 类名称(参数类型 参数名称){ 方法体 } 注意事项: 构造方法的名称必须和所在的类 ...

  8. Kafka单机安装Version1.0.1(自带Zookeeper)

    1.说明 Kafka单机安装,基于版本1.0.1, 使用kafka_2.12-1.0.1.tgz安装包, 其中2.12是编译工具Scala的版本. 而且不需要另外安装Zookeeper服务, 使用Ka ...

  9. SpringBoot 与 SpringCloud 的版本对应详细信息

    "spring-cloud": { "Finchley.M2": "Spring Boot >=2.0.0.M3 and <2.0.0.M ...

  10. python 用字典进行计数的三种常用方法

    1.常规方法 初始化一个字典,遍历列表或字符串,如果遍历的值已经存在于字典中,则字典值直接加1,否则,令字典键为当前遍历的值,字典值为1, 代码如下: >>> dic = {} &g ...