webpack基础----笔记

69 阅读5分钟

webpack基本配置

webpack五大概念:

entry(入口):指示webpack从哪开始打包

output(输出):指示webpack打包输出到哪,打包文件如何命名

loader(加载器):可以借助loader来帮助webpack打包其他类型资源

pugins(插件):拓展webpack功能

mode(模式):webpack开发模式

  • 开发模式:development
  • 生产模式:production

创建webpack.config.js配置五大概念:

// Node.js的核心模块,专门用来处理文件路径
const path = require("path");
module.exports={
    entry:'./src/main.js'
    output:{
         // path: 文件输出目录,必须是绝对路径
        // path.resolve()方法返回一个绝对路径
        // __dirname 当前文件的文件夹绝对路径
        path:path.resolve.(__dirname,'dist')
    },
    module:{
        rules:[]
    },
    pugins:[],
    //开发模式
    mode:'development'
}

处理样式资源

处理css

css-loader、style-loader

css-loader 把css处理成webpack可识别资源

style-loader 创建一个style标签,把处理好的css放入style标签中

安装

安装css-loaderstyle-loader

npm i css-loader style-loader -D

在webpack.config.js中配置

module:{
    rules:[
       {
            test:'/.css$/',
            //ues执行顺序为从左到右依次执行
            use:['style-loader','css-loader']
       }
    ]
}

处理less

less-loader:把less资源转为css资源

安装less-loader

npm i less-loader -D

在webpack.config.js中配置

module:{
    rules:[
       {
            test:'/.less$/',
            //ues执行顺序为从左到右依次执行
            use:['style-loader','css-loader','less-loader']
       }
    ]
}
​

打包图片资源

配置

在webpack.config.js中配置

module:{
    rules:[
        {
            test:'/.(png|jpg|gif)$/',
            type:'asset'
        }
    ]
}

优化打包图片

将小于某个大小的图片转化成 data URI 形式(Base64 格式)

module:{
    rules:[
        {
            test:'/.(png|jpg|gif)$/',
            type:'asset',
            parser:{
                dataURLcondition:{
                    maxSize:10*1024//图片小于10kb则打包成base64
                }
            }
        }
    ]
}

修改打包资源的名称与路径

在webpack.config.js中配置

在module下rules中genrator中配置

module:{
    rules:[
        {
            test:'/.(png|jpg|gif)$/',
            type:'asset',
            parser:{
                dataURLcondition:{
                    maxSize:10*1024//图片小于10kb则打包成base64
                }
            },
            generator:{
                // 将图片文件输出到 static/imgs 目录中
                // 将图片文件命名 [hash:8][ext][query]
                // [hash:8]: hash值取8位
                // [ext]: 使用之前的文件扩展名
                // [query]: 添加之前的query参数
                filename: "static/imgs/[hash:8][ext][query]",
            }
        }
    ]
}

自动清空上次打包资源

在webpack.config.js中配置

在output中配置clean

output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js",
    clean: true, // 自动将上次打包目录资源清空
  },

处理字体图标文件

在webpack.config.js中配置

在module中配置

module:{
    rulse:[
        {
            test:"/.ttf$/",
            type:'asset/resource'
            generator: {
              filename: "static/media/[hash:8][ext][query]",
            },
        }
    ]
}

type: "asset/resource"和type: "asset"的区别:

  1. type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源,其他不做处理
  2. type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源,同时小于某个大小的资源会处理成 data URI 形式

处理其他资源

在webpack.config.js中配置

在module中配置

module:{
    rules:[
        {
            test:'/.(mp3|mp4)$/',
            type:'asset/resource',
            generator:{
                filename:'static/media/[hash:8][ext][query]'
            }
        },
    ]
}

处理js资源

ESlint :它是用来检测 js 和 jsx 语法的工具,可以配置各项功能,我们使用 Eslint,关键是写 Eslint 配置文件,里面写上各种 rules 规则,将来运行 Eslint 时就会以写的规则对代码进行检查

ESlint配置文件

在项目根目录下创建 .eslintrc.js 文件

在.eslintrc.js配置

module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
  // ...
  // 其他规则详见:https://eslint.bootcss.com/docs/user-guide/configuring
};
  1. parserOptions 解析选项

parserOptions: {
  ecmaVersion: 6, // ES 语法版本
  sourceType: "module", // ES 模块化
  ecmaFeatures: { // ES 其他特性
    jsx: true // 如果是 React 项目,就需要开启 jsx 语法
  }
}
  1. rules 具体规则
  • "off"0 - 关闭规则
  • "warn"1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
  • "error"2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
rules: {
  semi: "error", // 禁止使用分号
  'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句,否则警告
  'default-case': [
    'warn', // 要求 switch 语句中有 default 分支,否则警告
    { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
  ],
  eqeqeq: [
    'warn', // 强制使用 === 和 !==,否则警告
    'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
  ],
}

3.继承eslint

  1. extends 继承

开发中一点点写 rules 规则太费劲了,所以有更好的办法,继承现有的规则。

现有以下较为有名的规则:

// 例如在React项目中,我们可以这样写配置
module.exports = {
  extends: ["react-app"],
  rules: {
    // 我们的规则会覆盖掉react-app的规则
    // 所以想要修改规则直接改就是了
    eqeqeq: ["warn", "smart"],
  },
};

在webpack中使用

1.下载包

npm i eslint-webpack-plugin eslint -D

2.定义eslint配置,在.eslintcr.js中配置

module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
};

3.在webpack中配置

引入插件

const ESLintWebpackPlugin = require("eslint-webpack-plugin");

在pugins中配置

plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],

babel

主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中

babel配置文件

babel配置文件在根目录下创建一个babel.config.js文件

配置内容

odule.exports = {
  // 预设
  presets: [],
};

presets 预设

简单理解:就是一组 Babel 插件, 扩展 Babel 功能

  • @babel/preset-env: 一个智能预设,允许您使用最新的 JavaScript。
  • @babel/preset-react:一个用来编译 React jsx 语法的预设
  • @babel/preset-typescript:一个用来编译 TypeScript 语法的预设

在webpack中使用

下载包

npm i babel-loader @babel/core @babel/preset-env -D

定义babel配置文件

babel.config.js

odule.exports = {
  // 预设
  presets: ['@babel/preset-env'],
};

在webpack中配置

module:{
	reles:[
        {
            test:/.js$/,
            exclude: /node_modules/, // 排除node_modules代码不编译
       	 	loader: "babel-loader",
        }
    ]
}

处理HTML资源

下载包

npm i html-webpack-plugin -D

引入插件

const HtmlWebpackPlugin = require("html-webpack-plugin");

在webpack中配置

pugins:[
	 new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
]

修改index.html

把index.html引入的js文件给取消HtmlWebpackPlugin会自动帮忙引入

开发服务器&自动化

下载包

npm i webpack-dev-server -D

在webpack中配置

 // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },

运行

npx webpack serve

生产模式介绍

生产模式是开发完成代码后,我们需要得到代码将来部署上线。

这个模式下我们主要对代码进行优化,让其运行性能更好。

优化主要从两个角度出发:

  1. 优化代码运行性能
  2. 优化代码打包速度

生产模式准备

准备两个配置文件来放置不同的配置文件

目录格式:

├── webpack-test (项目根目录)
    ├── config (Webpack配置文件目录)
    │    ├── webpack.dev.js(开发模式配置文件)
    │    └── webpack.prod.js(生产模式配置文件)
    ├── node_modules (下载包存放目录)
    ├── src (项目源码目录,除了html其他都在src里面)
    │    └── 略
    ├── public (项目html文件)
    │    └── index.html
    ├── .eslintrc.js(Eslint配置文件)
    ├── babel.config.js(Babel配置文件)
    └── package.json (包的依赖管理配置文件)

配置开发模式的配置文件

  • webpack.dev.js
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: undefined, // 开发模式没有输出,不需要指定输出目录
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    // clean: true, // 开发模式没有输出,不需要清空输出结果
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  // 其他省略
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  mode: "development",
};

运行

npx webpack --config ./config/webapck.dev.js

配置生产模式文件

  • webpack.prod.js
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否自动打开浏览器
  // },
  mode: "production",
};

运行

npx webpack --config ./config/webpack.prod.js

配置运行指令

为了方便运行不同模式的指令,我们将指令定义在 package.json 中 scripts 里面

"scripts":{
	start:'npm run dev',
	dev:'npx webpack --config ./config/webpack.dev.js',
	build:'npx webpack --config ./config/webpack.prod.js'
}

配置运行指令后,以后运行webpack指令

开发者模式

npm start 或 npm run dev

生产则模式

npm run build

css处理

提取css成单独文件

1.下载包

npm i mini-css-extract-plugin -D

2.配置文件

webpack.prod.js

//引入mini-css-extract-plugin插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

因为mini-cssextract-plugin会提取css文件就不需要在使用style-loader来创建style标签来插入css

所以需要把style-loader替换成MiniCssExtractPlugin.loader

module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        // 用来匹配 .less 结尾的文件
        test: /.less$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [MiniCssExtractPlugin.loader, "css-loader",'less-loader'],
      },
    ]
    plugins:{
        //添加mini-css-extract-plugin插件
        new MiniCssExtractPlugin({
             // 定义输出文件名和目录
      		filename: "static/css/main.css",
        })
    }
}

css兼容性处理

下载包

npm i postcss-loader postcss postcss-preset-env -D

配置

webpack.prod.js

module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [
        	MiniCssExtractPlugin.loader, 
        	"css-loader",
        	
        	{
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
            
          },
        ],
      },
      {
        // 用来匹配 .less 结尾的文件
        test: /.less$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [
        	MiniCssExtractPlugin.loader, 
        	"css-loader",
        	
        	 options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
        	'less-loader'
       	],
      },
    ]
    plugins:{
        //添加mini-css-extract-plugin插件
        new MiniCssExtractPlugin({
             // 定义输出文件名和目录
      		filename: "static/css/main.css",
        })
    }
}

控制兼容性

我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。

{
  // 其他省略
  "browserslist": ["ie >= 8"]
}

想要知道更多的 browserslist 配置,查看browserslist 文档open in new window

以上为了测试兼容性所以设置兼容浏览器 ie8 以上。

实际开发中我们一般不考虑旧版本浏览器了,所以我们可以这样设置:

{
  // 其他省略
  "browserslist": ["last 2 version", "> 1%", "not dead"]
}

合并配置(封装重复代码)

在webpack.prod.js中配置

// 获取处理样式的Loaders(封装)
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};


module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
          //使用封装好的getStyleLoaders
        use: getStyleLoaders()
      },
      {
        // 用来匹配 .less 结尾的文件
        test: /.less$/,
        // use 数组里面 Loader 执行顺序是从右到左
          //使用封装好的getStyleLoaders
        use: getStyleLoaders('less-loader')
      },
    ]
    plugins:{
        //添加mini-css-extract-plugin插件
        new MiniCssExtractPlugin({
             // 定义输出文件名和目录
      		filename: "static/css/main.css",
        })
    }
}

webpack基础总结

本章节我们学会了 Webpack 基本使用,掌握了以下功能:

两种开发模式

  • 开发模式(development):代码能编译自动化运行
  • 生产模式(production):代码编译优化输出

Webpack 基本功能

  • 开发模式:可以编译 ES Module 语法
  • 生产模式:可以编译 ES Module 语法,压缩 js 代码

Webpack 配置文件

  • 5 个核心概念

    • entry
    • output
    • loader
    • plugins
    • mode
  • devServer 配置

Webpack 脚本指令用法

  • webpack 直接打包输出
  • webpack serve 启动开发服务器,内存编译打包没有输出