1. webpack介绍

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

1.1 安装

pnpm install webpack webpack-cli -D

1.2 入口(entry)

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的
默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点

1.2.1 src\index.js

import './index.css'

1.2.2 index.css

body{   
  background-color:green; 
}

1.2.3 webpack.config.js

const path = require('path'); 

module.exports = {   
  entry: './src/index.js', 
};

1.3 输出（output）

output属性告诉webpack在哪里输出它所创建的bundle，以及如何命名这些文件
主要输出文件的默认值是./dist/main.js, 其他生成文件默认放置在./dist文件夹中。

webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
}

1.4 loader

webapck 只能理解 JavaScript 和 JSON 文件
loader 让 webpack 能够去处理其他类型的文件，并为他们转换为有效模块，以供应用程序使用，以及被添加到依赖图中

webpack.config.js

pnpm i style-loader css-loader

cosnt path = require('path')

module.exports = {
  mode: 'development',
  devtool: false,
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module:{
    rules:[
      {test:/\.css$/, use:['style-loader', 'css-loader']}
    ]
  }
}

1.5 插件（plugin）

loader用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量

1.5.1 src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack5</title>
  </head>
  <body>
  </body>
</html>

1.5.2 webpack.config.js

pnpm i html-webpack-plugin -D

cosnt path = require('path')
cosnt HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  devtool: false,
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module:{
    rules:[
      {test:/\.css$/, use:['style-loader', 'css-loader']}
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
}

1.6 模式（mode）

日常的前端开发工作中，一般都会有两套构建环境
一套开发时使用，构建结果用于本地开发调试，不进行代码压缩，打印debug信息，包含sourcemap文件
一套构建后的结果是直接应用于线上的，即代码都是压缩后，运行时不打印debug信息，静态文件不包括sourcemap
webpack4.x 版本引入了mode的概念
当你指定使用production mode时，默认会启用各种性能优化的功能，包括构建结果优化以及webpack运行性能优化
而如果是 development mode 的话，则会开启 debug 工具，运行时打印详细的错误，以及更加快速的增量编译构建 | 选项 | 描述 | | --- | --- | | development | 会将项目中用到process.env.NODE_ENV的值设为development。启用NamedChunksPlugin和NamedModulesPlugin | | production | 会将项目中用到process.env.NODE_ENV的值设为production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin |

1.6.1 环境差异

开发环境
- 需要生成sourcemap文件
- 需要打印debug信息
- 需要live reload 或者 hot reload 的功能
生产环境
- 可能需要分离css成单独的文件，以便多个页面同享同一个css文件
- 需要压缩HTML/CSS/JS代码
- 需要压缩图片
其默认值为production

1.6.2 区分环境

--mode 用来设置模块内的process.env.NODE_ENV
--env 用来设置webpack配置文件的函数参数
cross-env用来设置node环境的proceess.env.NODE_ENV
DefinePlugin 用来设置模块内的全局变量

1.6.2.1 命令行配置1 --mode

webpack的mode默认为production
webpack serve的mode默认为development
可以在模块内通过process.env.NODE_ENV 获取当前的环境变量，无法在webpack配置文件中获取此变量

"scripts":{
  "build": "webpack --mode=development",
  "dev": "webpack serve --mode=production"
}

console.log(process.env.NODE_ENV)//development|production

console.log('NODE_ENV', process.env.NODE_ENV) //undefined

1.6.2.2 命令行配置2 --env

无法在模块内通过 process.env.NODE_ENV访问
可以通过 webpack.config.js 中通过函数获取当前环境变量
我们也可以通过 env的值，来影响 mode 参数的设置，mode参数会影响代码中 process.env.NODE_ENV中的值

"scripts":{
  "build": "webpack --env=development",
  "dev": "webpack serve --env=production"
}

console.log(process.env.NODE_ENV)//undefined

console.log('NODE_ENV', process.env.NODE_ENV) //undefined

module.exports = (env, argv) => {
  console.log(env) //development|production
}

1.6.2.3 mode 配置

和命令行配置一样我们可以直接在webpack.config.js中配置，但是这样就会写死。
这里配置到的mode , 会影响我们文件内部的 process.env.NODE_ENV

console.log('NODE_ENV', process.env.NODE_ENV) //undefined

module.exports = (env, argv) => {
  mode: 'development'
}

1.6.2.4 DefinePlugin 插件

该插件的作用是设置全局的变量，所有模块都能读取到该变量的值
可以在任意模块内通过process.env.NODE_ENV获取当前的环境变量
但无法在 node环境（webpack配置文件中）获取当前的环境变量

console.log('NODE_ENV', process.env.NODE_ENV) //undefined


module.exports = {
  ...,
  
  plugins:[
    new webpack.DefinePlugin({
      'process.env.NODE_ENV':'production'
    })
  ]
}

console.log(process.env.NODE_ENV)//'production'

1.6.2.5 cross-env

pnpm i cross-env -D
只能设置 node 环境下的变量 NODE_ENV

"scripts":{
  "build": "cross-env NODE_ENV=production webpack",
    "dev": "cross-env NODE_ENV=development webpack serve"
}

console.log('NODE_ENV', process.env.NODE_ENV) //development|production


module.exports = {
  ...,
  
}

2. 开发服务器

2.1 安装服务器

pnpm i webpack-dev-server -D

2.2 webpack.config.js

类别	配置名称	描述
output	path	指定输出到硬盘上的目录
output	publicPath	表示的是打包生成的index.html文件里面引用资源的前缀
decServer	publicPath	表示的是打包生成的静态文件所在的位置（若是devServer里面的publicPath没有设置），则会认为是output里面设置的publicPath的值
decServer	static	用于配置提供额外的静态文件内容的目录

2.3 webpack.config.js

module.exports = {
  devServer: {
    static: path.resolve(__dirname, 'public'),
    port: 8080,
    open: true
  },
}

2.4 package.json

  "scripts": {
    "start": "webpack serve"
  }

3.支持css

css-loader 用来翻译处理 @import 和 url()
style-loader 可以把css插入DOM中

3.1 模块安装

pnpm i style-loader css-loader -D

3.2 配置loader

module:{
    rules:[
        {test: /.css$/, use: ['style-loader', 'css-loader']}
    ]
}

4.支持less和sass

4.1安装

pnpm i less less-loader sass sass-loader -D

4.2配置

module:{
    rules:[
        {
            test:/\.less$/,
            use:['style-loader', 'css-loader', 'less-loader']
        },
        {
            {
            test:/\.sass$/,
            use:['style-loader', 'css-loader', 'sass-loader']
        	}
        }
    ]
}

5. css兼容性

为了兼容浏览器，有时候我们必须加入前缀
- Trident 内核：主要代表为 IE 浏览器，前缀为 -ms
- Gecko 内核：主要代表为 Firefox，前缀为 -mos
- Presto 内核：主要代表为 Opera ，前缀为 -o
- Webkit 内核：主要代表为 Chrome 和 Safari，前缀为 -webkit

5.1安装

postcss-loader 可以使用 PostCSS 处理 CSS
postcss=preset-env 把现代的css转换成大多数浏览器能理解的
PostCSS Preset Env 已经包含了 autoprefixer 和 browsers选项

pnpm i postcss-loader postcss-preset-env -D

5.2 postcss.config,js

let postcssPresetEnv = require('postcss-preset-env')
module.exports={
    plugins:[
        postcssPresetEnv({
            browsers: 'last 5 version'
        })
    ]
}

5.3 webpack.config.js

module:{
    rules:[
        {test: /.css$/, use: ['style-loader', 'css-loader', 'postcss-loader']}
        {
            test:/\.less$/,
            use:['style-loader', 'css-loader' , 'postcss-loader', 'less-loader']
        },
        {
            {
            test:/\.sass$/,
            use:['style-loader', 'css-loader' , 'postcss-loader', 'sass-loader']
        	}
        }
    ]
}

6. 资源模块

资源模块是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外loader
asset/source 导出资源的源代码
asset/resource 发送一个单独的文件并导出URL
asset/inline导出一个资源的 data URI
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过 url-loader , 并且配置资源体积限制实现。

6.1 事例配置

module:{
    rules:[
        {
            test:/(\.png)|(\.jpg)$/,
            type:'asset',
            parser:{
                dataUrlCondition:{
                    maxSize: 4*1024
                }
            }
        }
    ]
},
experiments:{
    asset: true
}

7. JS兼容性处理

babel-loader使用Babel和webpack转译JavaScript文件
@babel/@babel/coreBabel编译的核心包
babel-preset-env
@babel/@babel/preset-reactReact插件的Babel预设
@babel/plugin-proposal-decorators把类和对象装饰器编译成ES5

@babel/plugin-proposal-class-properties转换静态类属性以及使用属性初始值化语法声明的属性

{
        test: /\.jsx?$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ["@babel/preset-env", '@babel/preset-react'],
            plugins: [
              ["@babel/plugin-proposal-decorators", { legacy: true }],
              ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
              ["@babel/plugin-proposal-private-methods", { "loose": true }],
              ["@babel/plugin-proposal-class-properties", { loose: true }],
            ],
          },
        },
      }

jsconfig.json

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

webpack初级配置介绍

1. webpack介绍

1.1 安装

1.2 入口(entry)

1.2.1 src\index.js

1.2.2 index.css

1.2.3 webpack.config.js

1.3 输出（output）

1.4 loader

1.5 插件（plugin）

1.5.1 src/index.html

1.5.2 webpack.config.js

1.6 模式（mode）

1.6.1 环境差异

1.6.2 区分环境

1.6.2.1 命令行配置1 --mode

1.6.2.2 命令行配置2 --env

1.6.2.3 mode 配置

1.6.2.4 DefinePlugin 插件

1.6.2.5 cross-env

2. 开发服务器

2.1 安装服务器

2.2 webpack.config.js

2.3 webpack.config.js

2.4 package.json

3.支持css

3.1 模块安装

3.2 配置loader

4.支持less和sass

4.1安装

4.2配置

5. css兼容性

5.1安装

5.2 postcss.config,js

5.3 webpack.config.js

6. 资源模块

6.1 事例配置

7. JS兼容性处理