webpack4入门到进阶案例实战课程

 愿景:"让编程不在难学，让技术与生活更加有趣" 更多教程请访问xdclass.net

第一章 webpack4前言

第一集 webpack4入门到进阶案例实战课程介绍

简介:讲述webpack4课程大纲

第二集 webpack模块化打包概念介绍

简介:详细介绍webpack，什么是模块化打包

webpack是什么

webpack其实就是一个JavaScript应用程序的静态模块打包器。

webpack有什么做用

模块化打包:

webpack会将项目的资源文件当成一个一个模块，模块之间会有依赖关系， webpack将会对这些有依赖关系的文件进行处理，让浏览器可以识别， 最后将应用程序须要的每一个模块打包成一个或者多个bundle

第三集 webpack开发环境准备及经常使用打包模式介绍

简介:讲解webpack开发环境的搭建，打包模式和效果

1. 安装node

node官网地址:<https://nodejs.org/zh-cn/

2. 建立package.json文件

命令:npm init

3.安装webpack

本地安装:(推荐)

npm install --save-dev webpack npm install --save-dev webpack-cli

全局安装:

npm install --global webpack webpack-cli

 4.打包

默认entry入口 src/index.js

默认output出口 dist/main.js

打包模式:

webpack --mode development                                                                                                                                                   

webpack --mode production                                                                                                                                          

Package.json文件下添加scripts

设置好后在命令行程序中运行npm run dev或者npm run build来进行打包。

 第二章:webpack4配置

第一集 webpack核心配置config文件的初使用

简介:讲解webpack开发环境的搭建，打包模式和效果

1. 新建一个webpack.config.js

2. 配置入口entry(所需打包的文件路径)   ​

 

3. 配置出口output​

 

(1)path指文件打包后的存放路径

(2)path.resolve()方法将路径或路径片断的序列处理成绝对路径

(3)__dirname 表示当前文件所在的目录的绝对路径

(4)filename是打包后文件的名称

4. 命令行程序运行npm run dev或者npm run build

第二集 webpack经常使用配置之入口entry和出口output的进阶用法

简介:讲解入口和出口的多文件用法

入口entry

              单入口

                       单文件

                                例如: entry:‘./src/index.js’

                      多文件

                      在你想要多个依赖文件一块儿注入，而且将它们的依赖导向到一个“chunk”时，传入数组的方式就 颇有用。

                      例如:

 

​

             多入口

             例如:

​           

 

出口output

           单出口

         

 

​

          多出口

​

第三集 开发调试必备配置之本地服务器webpack-dev-server的搭建

简介:讲解webpack如何配置本地服务器

1. 了解webpack-dev-server webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它能够为webpack打包生成的资源

文件提供web服务。
webpack-dev-server 主要提供两个功能:

(1)为静态文件提供服务 

(2)自动刷新和热替换(HMR)

2. 安装webpack-dev-server
npm install --save-dev webpack-dev-server

3. 配置webpack.config.js文件

​

 

4. 配置package.json
"scripts": {
"start": "webpack-dev-server --mode development" }

5. 在build文件夹下新建index.html文件，在html中引入bundle.js

​

 

6. 在命令行程序运行npm run start

自动弹出页面，控制台有输出信息

​

 

第三章 webpack4 loader

第一集 webpack加载css所需loader及其使用方式

简介:讲解css加载器的使用方式

了解loader

loader让 webpack 可以去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可 以将全部类型的文件转换为 webpack 可以处理的有效模块，而后你就能够利用 webpack 的打包能 力，对它们进行处理。

安装loader
        安装style-loader和css-loader
       下载:
         npm install style-loader css-loader --save-dev

配置loader

在webpack.config.js文件里配置module中的rules

在 webpack 的配置中 loader 有两个目标:

     1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。

     2. use 属性，表示进行转换时，应该使用哪一个 loader。 

代码:

​

 

建立css文件并运行命令

建立index.css文件并import进index.js文件中

                         

 

            ​

第二集 webpack如何编译less和sass文件

简介:讲解webpack编译less和sass的方式

Less

        处理效果

         ​

 

       编译为

       ​

 

安装loader

            安装less-loader和less

            下载:

             npm install less-loader less --save-dev

配置loader

          代码:

        ​   

 

Sass

        处理效果 

       ​

 

       编译为

      ​

 

安装loader
           安装sass-loader和node-sass
           下载:
           npm install sass-loader node-sass --save-dev

配置loader 

 

第三集 使用PostCSS自动添加css3浏览器前缀

简介:讲解PostCSS如何为css3自动添加浏览器前缀

1. 处理效果

​

 

编译为

​

 

2. 安装loader

         安装postcss-loader和autoprefixer
         下载:
          npm install --save-dev postcss-loader autoprefixer

3. 配置loader

                 须要和autoprefixer一块儿用

                ​

 

浏览器设置:

           Loader中设置:

          {
          browsers: [
          'ie >= 8',//ie版本大于等于ie8 'Firefox >= 20',//火狐浏览器大于20版本 'Safari >= 5',//safari大于5版本 'Android >= 4',//版本 大于Android4 'Ios >= 6',//版本大于ios6
         'last 4 version'//浏览器最新的四个版本 ]
         }
        或者在package.json里加上下图设置:

       ​

 

第四集 webpack文件处理(file-loader)- 图片处理

简介:讲解使用file-loader处理图片加载

安装loader
下载安装file-loader
npm install --save-dev file-loader

配置config文件

​

 

选项配置

​

 

配置options:

name:为你的文件配置自定义文件名模板(默认值[hash].[ext])

context:配置自定义文件的上下文，默认为 webpack.config.js

publicPath:为你的文件配置自定义 public 发布目录

outputPath:为你的文件配置自定义 output 输出目录

[ext]:资源扩展名

[name]:资源的基本名称

[path]:资源相对于 context的路径

[hash]:内容的哈希值

第五集 webpack文件处理(file-loader)- 字体文件处理

简介:讲解file-loader处理字体文件的方式

下载字体文件

            以bootstrap字体文件为例子

            Boostrap字体文件下载地址:https://v3.bootcss.com/getting-started/

  在index.js中引入bootstrap.css，在html中使用bootstrap字体图标

配置config文件

​

 

第六集 webpack文件处理(file-loader)- 第三方js库处理

简介:讲解第三方js库的引入方式及使用方法

以jquery库为例子

       本地导入

       编写配置文件:

       webpack.ProvidePlugin参数是键值对形式，键就是咱们项目中使用的变量名，值就是键所指向的库。 webpack.ProvidePlugin会先从npm安装的包中查找是否有符合的库。

       若是webpack配置了resolve.alias选项(理解成“别名”)，那么webpack.ProvidePlugin就会顺着设置的路径一 直找下去

       使用webpack.ProvidePlugin前须要引入webpack

​

 

npm安装模块

        安装jquery库:

        npm install jquery --save-dev

        直接在js里import引入

Import $ from‘jqu

 第七集 使用babel-loader编译ES6语法

简介:讲解webpack将ES6语法编译成ES5语法的方式

了解babel

        目前，ES6(ES2015)这样的语法已经获得很大规模的应用，它具备更加简洁、功能更增强大的特 点，实际项目中极可能会使用采用了ES6语法的模块，但浏览器对于ES6语法的支持并不完善。为了实 现兼容，就须要使用转换工具对ES6语法转换为ES5语法，babel就是最经常使用的一个工具

​

 

转换为

​

 

           babel转化语法所需依赖项:
           babel-loader: 负责 es6 语法转化
           babel-core: babel核心包 babel-preset-env:告诉babel使用哪一种转码规则进行文件处理

安装依赖

           npm install babel-loader @babel/core @babel/preset-env --save-dev

配置config文件

             exclude表示不在指定目录查找相关文件

            ​

 

          根目录新建 .babelrc 文件配置转换规则

          ​

 

          另外一种规则配置

         ​

 

第四章 webpack4 插件

第一集 根据HTML模板自动生成HTML

简介:讲解如何使用插件根据模板自动生成html文件并关联相关文件

了解html-webpack-plugin

          HtmlWebpackPlugin会自动为你生成一个HTML文件，根据指定的index.html模板生成对应的 html 文

件。

​

 

根据src下的index.html自动在打包后的目录下生成html文件，相关引用关系和文件路径都会按照正确的配置被添加进 生成的html里

安装依赖

            npm install html-webpack-plugin --save-dev

配置config文件

​

 

第二集 webpack提取分离css单独打包

简介:讲解如何从打包后的chunk文件中提取分离出css

处理效果

将全部的入口 chunk(entry chunks)中引用的css，移动到独立分离的 CSS 文件

​

 

ExtractTextPlugin插件

        安装(下载)

        npm install --save-devextract-text-webpack-plugin@next

       配置config文件

                  引入插件:

​               

 

                Rules设置:

​              

 

              Plugins设置

​            

 

mini-css-extract-plugin插件

         安装(下载)

         npm install --save-dev mini-css-extract-plugin

配置config文件

        引入插件

​       

        Rules设置:

​      

       Plugins设置

​     

 

第三集 压缩css及优化css结构

简介:讲解使用插件压缩css及优化css结构

处理效果

​

 

处理后

​

 

optimize-css-assets-webpack-plugin插件

             安装(下载)

             npm install --save-dev optimize-css-assets-webpack-plugin

            配置config文件

引入插件:

​

 

Plugins设置

assetNameRegExp: 正则表达式，用于匹配须要优化或者压缩的资源名。默认值是 /.css$/g cssProcessor: 用于压缩和优化CSS 的处理器，默认是 cssnano.

cssProcessorPluginOptions:传递给cssProcessor的插件选项，默认为{}

canPrint:表示插件可以在console中打印信息，默认值是true

discardComments:去除注释

​

 

第四集 运用webpack插件拷贝静态文件

简介:讲解如何拷贝静态资源文件到打包后的目录

         处理效果

        ​

 

处理后

​

 

      安装(下载)

      npm install --save-dev copy-webpack-plugin

     配置config文件

            引入插件 

           ​

 

          Plugins设置

​       

 

第五集 webpack插件之clean-webpack-plugin清除文件

简介:讲解如何清除以前打包的旧文件

处理效果

当咱们修改带hash的文件并进行打包时，每打包一次就会生成一个新的文件，而旧的文件并无删除。

​

 

为了解决这种状况，咱们可使用clean-webpack-plugin在打包以前将文件先清除，以后再打包出最新的文件

​

 

安装

npm install --save-dev clean-webpack-plugin

配置config文件

引入插件

​

Plugin配置

​

注意:clean-webpack-plugin 2.0版本需改为如下配置

​

 

dry是否模拟删除文件，true是模拟删除，不会移除文件，false会移除文件再从新建立

插件地址:https://www.npmjs.com/package/clean-webpack-plugin

第五章 webpack4 其余配置

第一集 webpack处理HTML内嵌图片

简介:讲解webpack如何处理html中引入的图片

处理效果 未使用loader时，会出现路径错误，图片不显示的状况

​

 

通过loader处理后，图片能正常显示

​

 

安装

cnpm install --save-dev html-loader

配置config文件

        Rules中配置

        ​

 

第二集 webpack调试必备配置之SourceMap的类型介绍及其使用方式

简介:讲解sourcemap的做用和调试方式

了解sourcemap

Sourcemap是为了解决实际运行代码(打包后的)出现问题时没法定位到开发环境中的源代码的问题。

​

 

devtool选项

​

 

​

5个基本类型:

                 (1)eval

                 每一个模块都使用 eval() 执行，每个模块后会增长sourceURL来关联模块处理先后的对应关系。以下图

                          ​

因为会映射到转换后的代码，而不是映射到原始代码(没有从 loader 中获取 source map)，因此不能正确的显示行 数。由于不须要生成模块的sourcemap，所以打包的速度很快。

(2)source-map

source-map会为模块生成独立的soucemap文件

​

打包后的模块在模块后面会对应引用一个.map文件，同时在打包好的目录下会生成相应的.map文件。以下图

​

 

(3)lnline

与source-map不一样，增长inline属性后，不会生成独立的.map文件，source map 转换为 DataUrl 后添加到 bundle 中。以下所示:

 

​

(4) cheap

cheap属性在打包后一样会为每个模块生成.map文件，可是与source-map的区别在于cheap生成的.map文件会忽

略原始代码中的列信息,也不包含loader的sourcemap。

(5)module

包含了loader模块之间的sourcemap，将 loader source map 简化为每行一个映射。

使用sourcemap调试

js调试

​

css调试

调试css时须要将压缩css的插件注释掉

​

Css sourcemap设置

​

 

第三集 webpack开发调试必备功能之模块热替换HMR

简介:讲解webpack核心知识点模块热替换的做用

了解模块热替换

模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程当中替换、添加或删除模块，而无需 从新加载整个页面。主要是经过如下几种方式，来显著加快开发速度:

l 保留在彻底从新加载页面时丢失的应用程序状态。
l 只更新变动内容，以节省宝贵的开发时间。
l 调整样式更加快速 - 几乎至关于在浏览器调试器中更改样式。

配置config文件

Plugin设置

​

 

NamedModulesPlugin:当开启 HMR 的时候使用该插件会显示模块的相对路径

其余配置

devServer中加入hotOnly表示只有热更新，不会自动刷新页面

​

 

修改js文件时代码不会自动热更新，需加入如下代码能够告诉 webpack 接受更新的模块

​

 

第四集 区分生产环境和开发环境的配置

简介:讲解如何区分生产环境和开发环境的配置

简单了解

开发环境和生产环境的构建目标差别很大。在开发环境中，咱们须要具备强大的、具备实时从新加载或热模块 替换能力和localhost server。 而在生产环境中，咱们的目标则转向于关注更小的 bundle，以及资源的优化， 以改善加载时间。因此咱们一般建议为每一个环境编写彼此独立的webpack 配置。

安装

npm install --save-dev webpack-merge

配置

拆分文件

在这里咱们能够将webpack.config.js拆分为三个文件，分别是webpack.common.conf.js、

webpack.dev.conf.js和webpack.prod.conf.js。

​

 

webpack.common.conf.js是放一些咱们公用的配置，好比入口entry、出口output、经常使用loader以及插 件等。

webpack.dev.conf.js是在开发环境上的配置，好比devServer配置、模块热替换等方便开发的配置 webpack.prod.conf.js是在生产环境上的配置，好比提取分离css、压缩css和js等

webpack.common.conf.js

​

 

Webpack.dev.conf.js

​

Webpack.prod.conf.js

 

 

修改script

修改package.json文件中的script

​

 

--config能够指定使用的配置文件

第五集 webpack打包优化技巧(1)

简介:介绍如何优化webpack打包速度的经常使用方法

第六集 webpack打包优化技巧(2)

简介:案例实战之使用resolve、happypack等方法优化打包速度

减小文件搜索范围

优化resolve.extensions配置

在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试询问文件是否存在。 在配置 resolve.extensions 时你须要遵照如下几点，以作到尽量的优化构建性能:
l 后缀尝试列表要尽量的小，不要把项目中不可能存在的状况写到后缀尝试列表中。 l 频率出现最高的文件后缀要优先放在最前面，以作到尽快的退出寻找过程。

l 在源码中写导入语句时，要尽量的带上后缀，从而能够避免寻找过程。例如在你肯定的状况下把 require('./data') 写成 require('./data.json') 。

 

​

优化 resolve.modules配置
resolve.modules 用于配置 Webpack 去哪些目录下寻找第三方模块。

resolve.modules 的默认值是 ['node_modules']，会采用向上递归搜索的方式查找

​

 

优化resolve.alias配置

resolve.alias配置项经过别名来把原导入路径映射成一个新的导入路径。

​

缩小文件匹配范围

Include:须要处理的文件的位置

Exclude:排除掉不须要处理的文件的位置

​

 

设置noParse

防止 webpack 解析那些任何与给定正则表达式相匹配的文件。忽略的文件中不该该含有import,
require, define 的调用，或任何其余导入机制。忽略大型的 library 能够提升构建性能。好比jquery、elementUI等 库

​

 

给babel-loader设置缓存
babel-loader提供了 cacheDirectory特定选项(默认 false):设置时，给定的目录将用于缓存加载器的结果。

​

 

使用happyPack

HappyPack的基本原理:在webpack构建过程当中，咱们须要使用Loader对js，css，图片，字体等文件作转换操做，

而且转换的文件数据量也是很是大的，且这些转换操做不能并发处理文件，而是须要一个个文件进行处理， HappyPack的基本原理是将

这部分任务分解到多个子进程中去并行处理，子进程处理完成后把结果发送到主进程中，从而减小总的构建时间。

(1)安装

​
(2)配置webpack.common.conf.js文件
引入happypack

Rules设置

​

 

Plugins设置

 

​

(3)npm run build打包

第六章 webpack4 课程总结

第一集 课程核心知识回顾和总结

简介:回顾总结课程核心知识点

小D课堂，愿景:让编程不在难学，让技术与生活更加有趣

相信咱们，这个是可让你学习更加轻松的平台，里面的课程绝对会让你技术不断提高

欢迎加小D讲师的微信: jack794666918
咱们官方网站:https://xdclass.net
千人IT技术交流QQ群: 718617859

重点来啦:免费赠送你干货文档大集合，包含前端，后端，测试，大数据，运维主流技术文档(持续更新) https://mp.weixin.qq.com/s/qYnjcDYGFDQorWmSfE7lpQ

 

 

 

 

 

 

 

 

 

 

 

 

@font-face { font-family: "Times New Roman"; }@font-face { font-family: "宋体"; }@font-face { font-family: "Calibri"; }p.MsoNormal { margin: 0pt 0pt 0.0001pt; text-align: justify; font-family: Calibri; font-size: 10.5pt; }h1 { margin-top: 5pt; margin-bottom: 5pt; text-align: left; font-family: 宋体; font-weight: bold; font-size: 24pt; }h2 { margin-top: 5pt; margin-bottom: 5pt; text-align: left; font-family: 宋体; font-weight: bold; font-size: 18pt; }h3 { margin-top: 5pt; margin-bottom: 5pt; text-align: left; font-family: 宋体; font-weight: bold; font-size: 13.5pt; }p.pre { margin: 0pt 0pt 0.0001pt; text-align: left; font-family: 宋体; font-size: 12pt; }p.p { margin: 5pt 0pt; text-align: left; font-family: Calibri; font-size: 12pt; }span.msoIns { text-decoration: underline; color: blue; }span.msoDel { text-decoration: line-through; color: red; }div.Section0 { }