AI 助理
备案控制台
开发者社区 彭世瑜的博客 文章 正文

Webpack入门：常用loader和plugin配置

2023-04-14 139
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Webpack入门：常用loader和plugin配置

文档

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

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

目录

环境准备

node -v
v16.14.0
# 初始化项目
npm init -y
# 安装依赖 npm cnpm yarn pnpm 均可
npm i -D webpack webpack-cli

使用默认配置打包

输入 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 i -D style-loader css-loader

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 less-loader

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 --save-dev mini-css-extract-plugin

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


文章标签：
JavaScript
前端开发
CDN
缓存
关键词：
Webpack loader
Webpack plugin
Webpack loader plugin
Webpack配置
Webpack loader配置
编程达人
目录
相关文章
html的七十二变
|
3月前
|
前端开发
在Webpack配置文件中，如何配置loader以处理其他类型的文件，如CSS或图片
在Webpack配置文件中，通过设置`module.rules`来配置loader处理不同类型的文件。例如，使用`css-loader`和`style-loader`处理CSS文件，使用`file-loader`或`url-loader`处理图片等资源文件。配置示例：在`rules`数组中添加对应规则，指定`test`匹配文件类型，`use`指定使用的loader。
html的七十二变
197 8
html的七十二变
|
3月前
|
JavaScript 前端开发
Webpack中loader的使用场景
Webpack中的Loader用于处理和转换模块文件，如将TypeScript转为JavaScript、CSS预处理等，通过配置不同的Loader，可以灵活地支持多种文件类型和语言，实现模块化开发与构建优化。
html的七十二变
109 4
html的七十二变
|
3月前
|
前端开发 JavaScript
webpack 中 loader 和 plugin 的区别
在 webpack 中，loader 用于转换模块的源代码，如将 TypeScript 转为 JavaScript；而 plugin 则扩展了 webpack 的功能，可以执行更复杂的任务，如优化打包文件、注入环境变量等。两者共同作用于构建流程的不同阶段。
html的七十二变
107 5
我是快乐的嘟嘟
|
3月前
|
缓存 前端开发 JavaScript
Webpack与Babel的进阶配置与优化
通过以上的进阶配置和优化策略，可以更好地发挥`Webpack`与`Babel`的功能，提高项目的性能和开发效率。
我是快乐的嘟嘟
81 2
dufadayang
|
3月前
|
JavaScript 前端开发 UED
如何配置 Webpack 进行代码分离？
通过以上方法，可以有效地配置Webpack进行代码分离，根据项目的具体需求和场景选择合适的方式，能够显著提高应用的性能和用户体验。在实际应用中，还可以结合其他优化技术，进一步优化Webpack的打包结果和应用的加载速度。
dufadayang
102 5
dufadayang
|
3月前
|
前端开发 JavaScript
webpack相关配置
以上只是Webpack配置的一些常见部分，实际应用中还可以根据具体的项目需求和场景进行更复杂和细致的配置，以满足不同的构建和优化要求。
dufadayang
86 2
那年春天
|
3月前
|
缓存 JavaScript 前端开发
配置 Webpack 进行代码分离的常见方法有哪些？
通过以上常见方法，可以根据项目的具体需求和场景，灵活地配置Webpack进行代码分离，从而提高应用的性能和加载速度，优化用户体验。
那年春天
58 3
大史不说话
|
JavaScript 前端开发
史上最走心webpack4.0中级教程——配置之外你应该知道的事
《webpack4.0各个击破系列》适合不满足于只会配置webpack但一时间又看不懂源码的中级读者。我没法保证这个系列是最好的，但至少能保证每一篇博文都跟那些Ctrl+C和Ctrl+V的博文有本质的区别，不信你读读看。
大史不说话
1810 0
dufadayang
|
5月前
|
JavaScript
webpack打包TS
webpack打包TS
dufadayang
149 60
我是快乐的嘟嘟
|
4月前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
我是快乐的嘟嘟
82 10

热门文章

最新文章

  • 1
    Webpack 插件底层的实现原理是什么？
  • 2
    【vue】webpack打包vue项目并且运行在Tomcat里面
  • 3
    2.2.3 使用webpack loader
  • 4
    你真的理解 Webpack？请回答下列问题
  • 5
    Vue 打包 chunk-vendors.js 文件过大解决方案（compression-webpack-plugin）
  • 6
    webpack指南-webpack介绍-代码分割 - CSS
  • 7
    如何在本地运行 webpack 打包后的文件
  • 8
    webpack window 添加ES6支出
  • 9
    webpack 打包去掉控制台的console.log()
  • 10
    2.2.4 webpack 配置文件
  • 1
    Webpack 插件底层的实现原理是什么？
    61
  • 2
    在Webpack配置文件中，如何配置loader以处理其他类型的文件，如CSS或图片
    197
  • 3
    Webpack中loader的使用场景
    109
  • 4
    webpack 中 loader 和 plugin 的区别
    108
  • 5
    Webpack与Babel的进阶配置与优化
    82
  • 6
    配置 Webpack 进行代码分离的常见方法有哪些？
    58
  • 7
    如何配置 Webpack 进行代码分离？
    103
  • 8
    webpack相关配置
    86
  • 9
    工程化（webpack+vite）
    66
  • 10
    前端性能优化：Webpack与Babel的进阶配置与优化策略
    119

    • 相关课程

    更多
  • 前端自动化构建工具 Webpack
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Python Web 框架 Django 快速入门
  • Python Web 框架 Flask 快速入门

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • SPARKLER，A web-crawler on Apache Spark
  • 从Web到Cloud App

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
    • 下一篇
    通义万相：视觉生成大模型再进化