从基础到实战 手把手带你掌握新版Webpack4.0完整之个人笔记

1-1课程导学

2-1 webpack究竟是什么

1.面向过程的程序和面向对象的程序

     面向过程的程序相当于一大长串的代码，会造成文件越来越大，不利于维护

     面向对象是把一个部分封装到一个类中，当某个东西出现问题时，可以方便的去寻找这个类

2.import 引入js文件

     浏览器并不认识import，需要通过webpack来解析一下

3.安装webpack

     npm init

     npm install webpack webpack-cli

4.webpack使用

   npx webpack index.js  (会把index.js中的import转为正常的语法让浏览器认识)

2-2 什么是模块打包工具

1.webpack是什么？

    webpack是模块打包工具，并不是js的翻译器，因为他只能认识一些简单的import语法，别的识别不了，模块打包的意思是把所有的引入的模块（Moudule）引入到一起，生成一个最终的js文件，模块常见的几种规范：ES Moudule ,CommonJS,CMD,AMD

2.webpack的发展历史

最开始webpack是打包js的，随着版本的发展，现在可以打包任何常见类型的文件了

3.阅读webpack官方文档

    （1）concepts学习moudule会对模块化有基本的认识

    （2）api的moudule

2-3 搭建webpack环境

1.打包速度

    作者说明，使用最新版本的node和最新版本的webpack的打包速度是最快的

2.webpakc安装方式

    （1）全局安装 

            npm install webpack webpack-cli    -g   (不建议，考虑到升级后老版本的webpack是否可用)

            webpack -v(全局搜索webapck)

    （2）项目安装

            npm install webpack webpack-cli -D

            npx webpack -v (在当前目录下的node_moudule中查找)

    （3）查看某个版本号 是否存在

            npm info webapck

            npm install [email protected]

2-4 使用webpack的配置文

1.默认配置文件 webpack.config.js 

2.                      

配置好后，运行npx webpack (webpack 先在当前目录下寻找webpack.config.js,如果没有则报错)

3.使用别名进行打包 npx webpack --config 别名

4.npm run 会先从nodemodule中查找模块，查不到会从全局中查找

5.webpack运行方式

webpack index.js   执行全局webpack


npx webpack index.js 执行nodemodule中的webpack


npm run bundle    执行nodemodule中的webpack

6.webpack-cli 作用

是我们可以在命令行中运行webpacks指令

7.作业：

观看webpack官方文档中getting started中的内容（指南中的起步）

2-5 浅谈webpack打包的输入内容

1.entry:"./src/index.js"其实是缩写，真正的写法为

2.打包输入内容解析

hash:本次打包唯一的一个hash

version:webpack的版本信息

time:打包所消耗的时间

Asset:打包的文件名

size:文件的大小

chunks:文件入口的唯一id，复杂项目的打包可能有多个id

chunk Names:文件入口的名字，相当于entry中的main

entryPoint main=bundle.js   打包的入口文件以及下面列出的都打包了哪些文件

3.打包的两种模式mode


    development 和 production(被压缩)

3-1 什么是loader

2-2 使用loader打包静态资源（图片篇）

3-3使用loader打包静态资源（样式篇上）

3-4使用loader打包静态资源（样式篇上）

每晚更新中。。。。