Webpack入门：常用loader和plugin配置-天翼云

文档

中文https://www.ctyun.cn/portal/link.html?target=https%3A%2F%2Fwebpack.docschina.org%2F
英文https://www.ctyun.cn/portal/link.html?target=https%3A%2F%2Fwebpack.js.org%2F

本文以 "webpack": "^5.74.0" 为例演示

文档是个好东西，掌握了基本的用法之后，建议多看看文档。

环境准备

node -v
v16.14.0

# 初始化项目
npm init -y

# 安装依赖 npm cnpm yarn pnpm 均可
npm

使用默认配置打包

输入 src/index.js

console.log('Hello World!')

使用默认配置打包

npx webpack

输出 dist/main.js

console.log("Hello World!");

使用配置文件 webpack.config.js

webpack.config.js

const path = require("path");

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

css样式文件处理

依赖

npm

webpack.config.js

const path = require("path");

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

  // 增加以下配置
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

css预处理-less

依赖

npm install -D less

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      // 处理css
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      // 处理less
      {
        test: /\.less$/i,
        loader: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
};

css兼容性处理

依赖

npm install -D postcss-loader postcss postcss-preset-env

webpack.config.js

const path = require("path");

// css处理公共loader
const commonCssLoaders = [
  "style-loader",
  "css-loader",
  {
    loader: "postcss-loader",
    options: {
      postcssOptions: {
        plugins: [["postcss-preset-env"]],
      },
    },
  },
];

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      // 处理css
      {
        test: /\.css$/i,
        use: commonCssLoaders,
      },
      // 处理less
      {
        test: /\.less$/i,
        use: [...commonCssLoaders, "less-loader"],
      },
    ],
  },
};

css代码提取

依赖

npm install

webpack.config.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// css处理公共loader
const commonCssLoaders = [
  // "style-loader",
  MiniCssExtractPlugin.loader,
  "css-loader",
  {
    loader: "postcss-loader",
    options: {
      postcssOptions: {
        plugins: [["postcss-preset-env"]],
      },
    },
  },
];

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

  plugins: [
    // 将 CSS 提取到单独的文件中
    new MiniCssExtractPlugin(),
  ],

  module: {
    rules: [
      // 处理css
      {
        test: /\.css$/i,
        use: commonCssLoaders,
      },
      // 处理less
      {
        test: /\.less$/i,
        use: [...commonCssLoaders, "less-loader"],
      },
    ],
  },
};

css代码压缩

依赖

npm install css-minimizer-webpack-plugin --save-dev

webpack.config.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

// css处理公共loader
const commonCssLoaders = [
  // "style-loader",
  MiniCssExtractPlugin.loader,
  "css-loader",
  // css兼容性处理
  {
    loader: "postcss-loader",
    options: {
      postcssOptions: {
        plugins: [["postcss-preset-env"]],
      },
    },
  },
];

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

  plugins: [
    // 将 CSS 提取到单独的文件中
    new MiniCssExtractPlugin(),
  ],

  module: {
    rules: [
      // 处理css
      {
        test: /\.css$/i,
        use: commonCssLoaders,
      },
      // 处理less
      {
        test: /\.less$/i,
        use: [...commonCssLoaders, "less-loader"],
      },
    ],
  },

  optimization: {
    minimizer: [
      // 使用 cssnano 优化和压缩 CSS
      new CssMinimizerPlugin(),
    ],
  },
};

js代码转译 babel

依赖

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

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",

  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },

  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

js代码压缩

npm install --save-dev terser-webpack-plugin

webpack.config.js

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");

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

  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },

  optimization: {
    minimize: true,
    minimizer: [
        // 使用 terser 来压缩 JavaScript
        new TerserPlugin()
    ],
  },
};

html模板

依赖

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

webpack.config.js

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

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

  plugins: [
    // 生成一个 HTML5 文件， 引入所有 webpack 生成的 bundle
    new HtmlWebpackPlugin(),
  ],
};

开发服务器

依赖

pnpm i -D webpack-dev-server

webpack.config.js

const path = require("path");

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

  devServer: {
    // 打开浏览器
    open: true,

    // 提供静态文件
    static: "./public",
  },
};

运行开发服务器

npx webpack serve

浏览器缓存

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "[name].[contenthash:6].js",
    path: path.resolve(__dirname, "./dist"),
    clean: true, // 在生成文件之前清空 output 目录
  },
};

路径别名

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "[name].[contenthash:6].js",
    path: path.resolve(__dirname, "./dist"),
    clean: true, // 在生成文件之前清空 output 目录
  },

  // 设置路径别名
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
};

打包分析

依赖

npm install --save-dev webpack-bundle-analyzer

webpack.config.js

const path = require("path");
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "[name].[contenthash:6].js",
    path: path.resolve(__dirname, "./dist"),
    clean: true, // 在生成文件之前清空 output 目录
  },

  plugins: [new BundleAnalyzerPlugin()],
};

使用CDN

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "[name].[contenthash:6].js",
    path: path.resolve(__dirname, "./dist"),
    clean: true, // 在生成文件之前清空 output 目录
  },

  // 外部加载
  externals: {
    vue: "Vue",
  },
};

输出 manifest

依赖

npm install webpack-nano webpack-manifest-plugin --save-dev

webpack.config.js

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

module.exports = {
  ...
  plugins: [
    new WebpackManifestPlugin()
  ]
};

完整配置

package.json

{
  "scripts": {
    "build": "cross-env NODE_ENV=production  webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack serve --config webpack.config.js"
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "babel-loader": "^8.2.5",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^4.0.0",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.3",
    "less-loader": "^11.0.0",
    "mini-css-extract-plugin": "^2.6.1",
    "postcss": "^8.4.16",
    "postcss-loader": "^7.0.1",
    "postcss-preset-env": "^7.8.0",
    "style-loader": "^3.3.1",
    "terser-webpack-plugin": "^5.3.5",
    "webpack": "^5.74.0",
    "webpack-bundle-analyzer": "^4.6.0",
    "webpack-cli": "^4.10.0",
    "webpack-manifest-plugin": "^5.0.0",
    "webpack-nano": "^1.1.1"
  }
}

webpack.config.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const { WebpackManifestPlugin } = require("webpack-manifest-plugin");

// css处理公共loader
const commonCssLoaders = [
  // "style-loader",
  MiniCssExtractPlugin.loader,
  "css-loader",
  // css兼容性处理
  {
    loader: "postcss-loader",
    options: {
      postcssOptions: {
        plugins: [["postcss-preset-env"]],
      },
    },
  },
];

module.exports = {
  mode: process.env.NODE_ENV,

  entry: "./src/index.js",

  output: {
    filename: "[name].[contenthash:6].js",
    path: path.resolve(__dirname, "dist"),
    clean: true, // 在生成文件之前清空 output 目录
  },

  devServer: {
    // 打开浏览器
    open: true,

    // 提供静态文件
    static: "./public",
  },

  // 设置路径别名
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },

  // 外部加载
  externals: {
    vue: "Vue",
  },

  module: {
    rules: [
      // 处理css
      {
        test: /\.css$/i,
        use: commonCssLoaders,
      },

      // 处理less
      {
        test: /\.less$/i,
        use: [...commonCssLoaders, "less-loader"],
      },

      // 处理图片资源
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },

      // 处理js
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },

  optimization: {
    minimize: true,

    minimizer: [
      // 使用 cssnano 优化和压缩 CSS
      new CssMinimizerPlugin(),

      // 使用 terser 来压缩 JavaScript
      new TerserPlugin(),
    ],
  },

  plugins: [
    // 生成一个 HTML5 文件， 引入所有 webpack 生成的 bundle
    new HtmlWebpackPlugin(),

    // 将 CSS 提取到单独的文件中
    new MiniCssExtractPlugin(),

    // 依赖分析
    // new BundleAnalyzerPlugin(),

    // manifest
    new WebpackManifestPlugin(),
  ],
};

参考
30 分钟掌握 Webpack

活动

应用商城

合作伙伴

开发者

支持与服务

了解天翼云

Webpack入门：常用loader和plugin配置

Webpack入门：常用loader和plugin配置

环境准备

使用默认配置打包

使用配置文件 webpack.config.js

css样式文件处理

css预处理-less

css兼容性处理

css代码提取

css代码压缩

js代码转译 babel

js代码压缩

html模板

开发服务器

浏览器缓存

路径别名

打包分析

使用CDN

输出 manifest

完整配置

相关文章

JavaScript高级之继承

前端项目实战205-数据处理成二维数组

前端工作总结242-uni-提交成功加入表单验证

从纯函数讲起，一窥最深刻的函子 Monad

JavaScript高级之数据类型及其判断方法

JavaScript-属性方法分类

Patroni的执行流

JavaWeb——jQuery常用方法

80行JavaScript代码实现的贪食蛇游戏，简约之美

如何在传统前端项目中进行javascript模块化编程，并引入使用vue.js、element-ui，并且不依赖nodejs和webpack？

作者介绍

最新文章

express学习12-app.locals对象

利用XMLHTTP无刷新添加数据之Post篇

利用XMLHTTP无刷新获取数据

树层级处理上万条数据优化！

GridView使用-添加事件在服务器端执行

express学习10-express静态资源处理

热门文章

JSP AJAX模拟实现自动补全的两种方式

react项目实战学习笔记-学习8-路由配置

webpack使用ts-loader导出export default问题

前端工作总结195-vue带参数跳转其他页面

在Linux系统下执行npm命令报错Tracker “idealTree“ already exists

webpack 多entry 配置

热门标签

相关产品

弹性云主机

天翼云电脑（公众版）

对象存储

云硬盘

随机文章

npm 私服工具verdaccio 安装配置试用

使用craco配置全局sass

利用XMLHTTP无刷新添加数据之Post篇

比较版本号

express学习10-express静态资源处理

mode9-node的系统模块fs