webpack4 entry to the real case of advanced courses

The first chapter webpack4 Introduction
Getting real case of the first episode webpack4 to Advanced Course Description
Description: about webpack4 syllabus
Episode webpack modular package Concepts Description: Details webpack, what is modular packaging
webpack what
webpack is actually a JavaScript applications static module packer.
What is the role webpack
modular package:
a resource file webpack will project as a module, there will be dependencies between modules, webpack will have dependencies on these files are processed, so that the browser can identify, and finally the application each module program requires packaged into one or more bundle
Episode webpack development environment preparation and packaging commonly used mode description Introduction: explain webpack development environment to build, package mode and effects

1. Install the Node
   the Node official website address: < https://nodejs.org/zh-cn/ 2. Create a file package.json
   command: npm init
2. Installation webpack
   local installation :( recommended)
   npm install --save-dev webpack install --save-dev webpack-cli npm
   global installation:
   npm install --global webpack webpack-cli
3. Packaging
   default entry entrance src / index.js default output export dist / main.js
   package mode:
   WebPACK --mode Development WebPACK --mode Production's
   add scripts under Package.json file
   
   After you set up the program to run from the command line or in npm run dev npm run build to package.
   

Chapter II: webpack4 configuration
episode webpack Core Configuration config file early Introduction: explain webpack development environment to build, package mode and effects

1. Create a webpack.config.js

2. An inlet arranged entry (required package file path)

   3. An outlet disposed Output
      (. 1) refers to a storage path after the path file packing
      (2) path.resolve () method of the path or path segment in the sequence is processed into the absolute path
      (3) __ dirname represents the absolute path of the directory of the current file
      (4) filename is the name of the packaged file
3. 命令行程序运行npm run dev或者npm run build
   第二集 webpack常用配置之入口entry和出口output的进阶用法 简介:讲解入口和出口的多文件用法
   入口entry 单入口
   多文件
   在你想要多个依赖文件一起注入，并且将它们的依赖导向到一个“chunk”时，传入数组的方式就 很有用。
   例如:
   
   多入口
   例如:
   单文件
   例如: entry:‘./src/index.js’
   
   出口output
   单出口
   
   多出口
   
   第三集 开发调试必备配置之本地服务器webpack-dev-server的搭建
   简介:讲解webpack如何配置本地服务器
4. 了解webpack-dev-server webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源
   文件提供web服务。
   webpack-dev-server 主要提供两个功能: (1)为静态文件提供服务 (2)自动刷新和热替换(HMR)
5. 安装webpack-dev-server
   npm install --save-dev webpack-dev-server
6. 配置webpack.config.js文件
   
   4. 配置package.json
      "scripts": {
      "start": "webpack-dev-server --mode development" }
7. 在build文件夹下新建index.html文件，在html中引入bundle.js
   
   6. 在命令行程序运行npm run start 自动弹出页面，控制台有输出信息
      
      愿景:"让编程不在难学，让技术与生活更加有趣" 更多教程请访问 xdclass.net
      第三章 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 有两个目标:
8. 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自动添加浏览器前缀
9. 处理效果
   
   编译为
   
10. 安装loader
    安装postcss-loader和autoprefixer
    下载:
    npm install --save-dev postcss-loader autoprefixer

11. 配置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]:资源扩展名

第五集 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‘jquery’
第七集 使用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)安装
cnpm install happypack --save-dev
(2)配置webpack.common.conf.js文件
引入happypack

Rules设置

Plugins设置

(3) npm run build packaged
vision: "Let the program is not difficult to learn, and make life more interesting technology" more tutorials please visit xdclass.net
Chapter VI webpack4 Course summary episode core knowledge curriculum review and summary
Introduction: reviewed the core curriculum knowledge
of small D class vision: to make programming is not difficult to learn, to make life more interesting technology and
believe us, this is easier for you to learn the platform, which courses will definitely make you welcome plus technology continues to improve small D micro-channel instructor: jack794666918
our official website: https://xdclass.net
thousands of IT technical exchange QQ group: 718 617 859 Key coming: free gift you a large collection of dry cargo documentation, including front-end, back-end, the test, big data, operation and maintenance mainstream technical documentation (constantly updated) https://mp.weixin.qq.com/s/qYnjcDYGFDQorWmSfE7lpQ