Webpack

第一章、Webpack简介

1.1、Webpack是什么

是一个模块打包器（bundler)，根据模块的依赖关系进行静态分析，生成对应的静态资源

1.2、安装

  npm i webpack webpack-cli --save-dev  或 npm install -D webpack webpack-cli             

1.3、Webpack五个核心概念

Entry： 入口打包起点

Output：打包后的bundles输出到哪了，以及如何命名

Loader：让webpack能处理非JS文件(webpack自身只理解JS)

Plugins：插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量

Mode：指示webpack使用相应模式的配置

development(开发)	会将 process.env.NODE_ENV的值设为development。启用NamedChunksPlugin和NamedModulesPlugin。	能让代码本地调试运行环境
production(生产)	会将 process.enV.NODE_ENV的值设为production，启用FlagDependencyUsagePlugin，FlagincludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin，OccurrenceOrderPlugin，SideEffectsFlagPlugin和UglifylsPlugin.	能让代码优化上线运行的环境

第二章：开发环境webpack打包各类型文件

所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。

2.1、下包

loader： 下载 -> 使用（配置loader）

plugins：下载 -> 引入 -> 使用，插件需要引入

注：

①webpack能处理js/json文件，不能处理css/img等其他资源，需要借助loader

②生产环境比开发环境多一个压缩代码

③生产环境和开发环境将ES6模块编译化成浏览器能识别的模块化（import data from './data.json"这句是es6的语法）

npm install -Y   //在空文件夹下生成package.json
npm i webpack webpack-cli --save-dev -D
npm install -D webpack-dev-server     //webpack的启动服务
npm install -D html-webpack-plugin   //webpack的插件，作用是自动生成index.html文件
npm i css-loader style-loader -D
npm i less less-loader -D
npm i url-loader file-loader -D   //下载url-loader  file-loader
npm i html-loader -D
npm install -D @babel/core @babel/preset-env babel-loader core-js    //安装bable,兼容不同浏览器

2.2、index.html文件

<!--，打包样式资源css、less-->
<h1 id="title">dsf</h1>
<!--打包图片资源-->
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<!--打包html文件的img图片-->
<img src="7d2dec895b509d53513d.png" alt="1_16"><br>
<!--iconfont图标-其他文件-->
<span class="iconfont icon-shanchu1"></span>
<span class="iconfont icon-tishi"></span>
<span class="iconfont icon-weixing1"></span><br>
<span>fref</span>

2.3、webpack.config.js文件

1)、打包样式资源css、less

2)、打包html资源

下载html-webpack-plugin插件

3)、打包图片资源

注意：url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs;解析时会出问题：[object Module],解决：关闭esModule，使用commonjs解析

html-loader:处理html文件的img图片(负责引入img，从而被url-loader进行处理)

name:’[hash:10.[ext]]’，这表示取hash值的前10位作为图片文件名，图片的后缀格式还是保持图片原先的

4)、打包其他资源

使用file-loader加载，除了html/js/css资源以外的资源

5)、devServer

注：开发服务器devserver：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~）

特点：只会在内存中编译打包，不会有任何输出

启动devServer指令为：webpack-dev-server

const  path = require ('path')
const htmlWebpackPlugins = require('html-webpack-plugin')
module.exports = {
  mode:'development',  //production、none
  entry:'./src/index.js',  //入口文件
  output:{                   //输出配置
    filename:'build.js',     //设置输出文件名，默认文件名是main.js
    path:path.resolve(__dirname,'build')   //输出路径
  },
  module:{    //loader配置,不同文件必须配置不同loader处理，一个文件只能处理一个loader
    rules:[
      /*打包样式资源css、less*/
      {
        test:/\.css$/,   //检测文件类型
        use:[            //要使用的loader，use数组中loader执行顺序，从右到左，从下到上 ，依次执行
          'style-loader',   //创建style标签，将js中的样式资源插入进行，添加到head中生效
          'css-loader' ,   //将css文件变成commonjs模块加载js中，里面内容是样式字符串
        ]
      },
      {
        test:/\.less$/,
        use:['style-loader','css-loader','less-loader']  //将less文件编译成css文件
      },
      /*处理图片资源,导致的问题是默认处理不了html中Img图片*/
      {
        test:/\.(jpg|png|gif)$/,
        loader: 'url-loader',    //下载url-loader  file-loader,url-loader依赖于file-loader
        options: {
          limit: 17 * 1024,    //图片小于12kb，就会用base64处理，优点，减少请求数量，缺点，图片体积会更大，
          esModule:false,//因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs;解析时会出问题：[object Module],解决：关闭ur1-1oader的es6模块化，使用commonjs解析
          name:'[hash:10].[ext]',   //给图片进行重命名;[hash：10]取图片的hash的前10位;[ext]取文件原来扩展名
          outputPath:'.src/assets/images'
        }
      },
      /*处理html文件的img图片(负责引入img，从而被url-loader进行处理)*/
      {
        test:/\.html$/,
        loader:'html-loader'   //处理html文件的img图片(负责引入img，从而被url-loader进行处理)
      },
      /*打包其他资源,除了html/js/css资源以外的资源*/
      {
        exclude: /\.(css|js|html|less)$/,
        loader:'file-loader',
        options: {name:'[hash:10].[ext]'}
      }
      ]
  },
  /*默认创建空的HTML*/
  plugins:[
    new htmlWebpackPlugins({    //功能：默认创建空的HTML，自动打包输出所有资源(js/css)
      template:"./src/index.html"    //复制"./src/index.html"文件，并自动引入打包输出的所有资源(js/css)
    })
  ],
  /*devServer配置*/
  devServer:{
    contentBase:path.resolve(__dirname,'build'),   //项目构建路径
    compress:true,   //启用gzip压缩
    port:3000,   //端口
    open:true,  //自动打开浏览器
  }
}

第三章：生产环境下webpack的js、css、html压缩及js语法检查

3.1、提取css文件、css兼容性处理、压缩css

安装的包

npm i mini-css-extract-plugin -D     //提取css文件
npm i postcss-loader postcss-preset-env -D   //css兼容性处理
npm i optimize-css-assets-webpack-plugin -D   //使用插件optimize-css-assets-webpack-plugin

1）、mini-css-extract-plugin 提取css文件

注意：安装插件mini-css-extract-plugin， 使用miniCssExtractPlugin.loader取代style-loader,作用：提取js中的css成单独文件；

在配置中对输出的文件进行重命名,将路径选在合适的地方build/css/build.css,

2）、css兼容性处理postcss

css兼容性处理：postcss–>postcss-loader postcss-preset-env

在package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式

{
   "browserslist": {
  "development": [            //设置node环境变量：process.env.NODE_ENV=developement
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"],
  "production": [            //生产环境是默认配置，要设置成开发环境必须设置process.env.NODE_ENV = 'development'
    ">0.2%",
    "not dead",
    "not op_mini all"]
} } 

3)、压缩css

使用optimize-css-assets-webpack-plugin

3.2、js 语法检查、兼容性处理、压缩

安装的包

npm i eslint eslint-loader -D   //检查语法并统一代码格式
npm install eslint-config-airbnb-base -D   //airbnb规则(风格指南)
npm install eslint-plugin-import -D 
npm i babel/preset-env -D   //基本js兼容性处理
npm i corejs -D           //高级js兼容性处理,实现按需

1)、eslint-loader eslint：检查语法并统一代码格式

注意：只检查自己写的源代码，第三方的库是不用检查的

设置检查规则：

package.json中eslintConfig中设置。

使用airbnb规则(风格指南)–>eslint-config-airbnb-base eslint-plugin-import

如果有些代码不用检查，使用 eslint-disable-next-line，即下一行eslint所有规则都失效

"eslintConfig": {   //package.json中eslintConfig中设置
  "extends": "airbnb-base"
}

2)、js兼容性处理

js兼容性处理：babel-loader,@babel/core, @babel/preset-env,将es6语法转为es5以下的语法

a、基本js兼容性处理—>@babel/preset-env

问题：只能转换基本语法，类似promise高级语法转换不了

b、高级js兼容性处理，按需加载—> corejs （将高级语法转成es5以下）

3)、js的压缩

mode:'production',   //生产环境下自动压缩js代码

4)、html的压缩

new htmlWebpackPlugin({
  template: "./src/index.html",
  minify: {
    collapseWhitespace:true,  //移除空格
    removeComments:true   //移除注释
  }
})

生产环境下webpack.config.js

注：一个文件只能被一个loader处理，当一个文件被多个loader处理，一定要指定loader的先后顺序，先eslint -> babel

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const miniCssExtractPlugin = require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
process.env.NODE_ENV = 'development'  //设置nodejs环境变量,是开发环境下
const CommanCssLoader = [      复用loade
  miniCssExtractPlugin.loader,  //取代style-loader,作用：提取js中的css成单独文件
  "css-loader" ,   //将css文件整合到js文件中
  {
    loader:'postcss-loader',  //z在package.json中定义broweserslist
    options: {
      ident:'postcss',
      plugins:()=>{     //postcss插件
        require('postcss-preset-env')
      }
    }
  },
]
module.exports = {
  mode:'production',   //生产环境下自动压缩js代码
  entry: "./src/index.js",
  output: {
    filename: "js/build.js",
    path:path.resolve(__dirname,"build")
  },
   module:{
     rules: [
       {
         test:/\.css$/,
         use:[...CommanCssLoader]
       },
       {
         test:/\.less$/,
         use:[
           ...CommanCssLoader, "less-loader"
         ]
       },
       {                        //eslint语法检查,在package.json中设置eslintConfig,使用airbnb-base
         test:/\.js$/,
         exclude: /node_modules/,   //排除第三方库
         enforce: "pre",             //优先执行
         loader: 'eslint-loader',
         options: {
           fix:true   //自动修复eslint的错误
         }
       },
       {
         test:/\.js$/,
         exclude: /node_modules/,
         loader: "babel-loader",
         options:{
           presets:[
             '@babel/preset-env',  //预设：指示babel做什么样的兼容性处理
             {
               useBuiltIns:'usage',   //按需加载
               corejs:{version:1},    //指定corejs版本
               targets:{    //指定兼容性做到哪个浏览器
                 chrome:'60',
                 firefox:'60',
               }
             }
           ]
         }
       },
       {
         test:/\.(jpg|png|gif)/,
         loader: 'url-loader',
         options: {
           limit: 8 * 1024,
           name:'[hash:10].[ext]',
           outputPath:'imgs',
           esModule:false
         }
       },
       {
         test:/\.html$/,
         loader:'html-loader'
       },
       {
         exclude: /\.(js|css|less|html|jpg|png|gif)/,
         loader:'file-loader',
         options: {outputPath:'media'}
       }
     ]
   },
  plugins: [
    new htmlWebpackPlugin({
      template: "./src/index.html",
      minify: {
        collapseWhitespace:true,  //移除空格     //压缩html
        removeComments:true   //移除注释
      }
    }),
    new miniCssExtractPlugin({
      filename: 'css/build.css',  //对输出的文件进行重命名,将路径选在build/css/build.css,在调试中以<link href="css/build.css" rel="styleShell">引入
    }),
    new optimizeCssAssetsWebpackPlugin()   //压缩css
  ]
}

第四章、webpack性能环境配置

4.1、开发环境性能优化

1、优化打包构建速度

HMR

2、优化代码调试

source-map

4.2、生产环境性能优化

1、优化打包构建速度

a、oneof

b、babel缓存

c、多进程打包

d、externals

e、dll

2、优化代码运行的性能

a、缓存（hash-chunkhash-contenthash）

b、tree-shaking

c、code split

d、懒加载/预加载

e、pwa

第五章：webpack详解5个核心点

5.1、entry：入口起点

1、单入口string–> ./src/index.js

打包形成一个chunk。输出一个bundle文件。

此时chunk的名称默认是main

2、多入口array–>[‘./src/index.js’，‘./src/add.js’]

所有入口文件最终只会形成一个chunk，输出去只有一个bundle文件。

->只有在HMR功能中让html热更新生效～（此情况下使用）

3、object多入口

有几个入口文件就形成几个chunk，输出几个bundle文件，此时chunk的名称是key

4、特殊用法

{ //所有入口文件最终只会形成一个chunk，输出出去只有一个bundle文件。
    index:r['./src/index.js'，'./src/count.js']，    
    add:./src/add.js'   //形成一个chunk，输出一个bundle文件。
}

5.2、output

output:{
    filename:'js/[name].js'，  //文件名称（指定名称+目录）
    path:resolve(__dirname，'build')， //输出文件目录（将来所有资源输出的公共目录）
    //所有资源引入公共路径前缀-->'imgs/a.jpg'->'/imgs/a.jpg'
    publicPath:'/'，
    chunkFilename:'js/[name]_chunk.js'，//非入口chunk的名称
    //library:'[name]'，//整个库向外暴露的变量名
    //libraryTarget:'window'//变量名添加到哪个上browser
    //lbraryTarget:'global'//变量名添加到哪个上node
    //libraryTarget:'commonjs'
}

5.3、module

module:{
    rules:[  //1oader的配置
     {
        test:/\.css$/，
        use:['style-loader'，'css-loader']     //多个loader用use     
     },
     {
         test:/\.js$/，
         exclude:/node_modules/，  //排除node_modules下的js文件
         include:resolve(_dirname，'src')， //只检查src下的js文件
         enforce:'pre'，    //优先执行 
         enforce:'psdt'，   //延后执行
         1oader:'eslint-loader'    //单个loader用loader
         options:{}
     }
     oneOf:[]  //一下配置只会生效一个
  ]
}   

5.4、resolve:解析模块规则

resolve:{    
	alias:{   //配置解析模块路径别名：优点简写路径缺点路径没有提示
        $css:resolve(_dirname，'src/css')
    }，   
    extensions:['.js，'.json'，.jsx"，'.css']，  //配置省略文件路径的后缀名    
    modules:[resolve(_dirname，../../node_modules')，‘node_modules'] //告诉 webpack解析模块是去找哪个目录
 }

5.5、devServer

devServer:{
    contentBase:path.resolve(__dirname,'build'),   //运行代码的目录
    watchContentBasel:true， //监视contentBase目录下的所有文件，一旦文件变化就会reload 
    watchOptions:{
		ignored:/node_modules/     //忽略文件
    },
    compress:true,   //启用gzip压缩
    port:3000,   //端口
    host:'localhost'，
    open:true,  //自动打开浏览器
    hot:true,//开启HRM功能
    clientLogLevel:'none'，  //不要显示启动服务器日志信息
    quiet:true， //除了一些基本启动信息以外，其他内容都不要显示   
 	overlay:false     //如果出错了，不要全屏提示。   
    proxy:{       //服务器代理-->解决开发环境跨域问题  
        '/api'：{    //一旦devServer（5e00）服务器接受到/api/xxx的请求，就会把请求转发到另外一个服务器（3000）
            target:'http://1ocalhost：3000'，       
            pathRewrite:{
				'^/api'：'' } //发送请求时，路径重写：将/api/xxx-->/xxx(去掉/api)
  	     }
    }
}

5.6、optimization

optimization:{
    splitchunks:{
      chunks:'al1'，
     },
     //将当前模块的记录其他模块的hash单独打包为一个文件runtime   
    runtimeChunk:{   //解决：修改a文件导致b文件的contenthash变化
    	name:entrypoint=>`runtime-${entrypoint.name}`
 	 },
   minimizer：{ //配置生产环境的压缩方案：js和css
     new TerserwebpackPlugin（{    
     	cache:true，     //开启缓存  
        paralle1：true， //开启多进程打包
        sourceMap:true   //启动source-map
     })    
   }  
}

第六章：webpack5

通过持久缓存提高构建性能

使用更好的算法和默认信来改善长期缓存。

通过更好的树摇和代码生成来改善捆绑包大小

消除处于怪异状态的内部结构，同时在v4中实现功能而不引入任何重大更改

通过引入重大更改为将来的功能做准备，以使我们能够尽可能长时间地使用v5.

npm i webpack@next webpack-cli -D

默认值：

entry:"./src/index.js
output,path:path.resolve(_dirnamc,"dist")
output.filename:"[neme].is"