webpack:1 概念

最新推荐文章于 2024-05-02 23:09:04 发布

小强有个dream

最新推荐文章于 2024-05-02 23:09:04 发布

阅读量495

点赞数

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/qq_36413371/article/details/121242893

版权

本文介绍了Webpack的核心组件Loader和Plugin的作用，Loader用于处理不同类型的文件，而Plugin则扩展其功能。详细讲解了如何安装和配置Webpack，包括项目中安装和全局安装的步骤。此外，文章还提到了Webpack的配置项如Entry和Output，并推荐了官方资源学习更高级的用法，包括自定义Plugin的开发。

摘要由CSDN通过智能技术生成

loader的作用：是用来处理不同类型的文件，操作的是文件
plugin的作用：是一个扩展器，不操作文件，用来增强功能

其它webpack的使用看webpack原汁原味的官网

高级的玩法：
有可能社区没有自己想要功能的插件，这个时候就需要自己来写webpack的plugin插件了；

项目目录安装： npm install webpack webpack-cli --save-dev 然后在package.json的scripts进行配置，比如 “webpack”: “webpack”
全局安装：安装后可以直接使用webpack命令

https://webpack.js.org/concepts/#browser-compatibility 为我们简单介绍了几个核心概念（Entry Output Loaders Plugins Mode Browser Compatibility Environment），且提供了两个视频

Manually Bundling an Application
// 讲的是通过打包和编译react代码来看bunder是怎么运行的
Live Coding a Simple Module Bundler

// 改视频讲了两个插件的使用
let babylon = require("babylon");
let traverse =  require("babel-traverse").default;
console.log(traverse)

const code = `function square(n) {
  return n * n;
}`;
const ast = babylon.parse(code);

traverse(ast, {
  enter(path) {
    if (path.isIdentifier({ name: "n" })) {
      path.node.name = "x";
    }
  }
});

https://webpack.js.org/configuration/ 自webpack5.x后，webpack不会为我们生成webpack.config.js配置文件

核心概念
entry - https://webpack.js.org/concepts/entry-points/
// 告诉你怎么配置单入口、多入口、以及配置选项

loader : 链接

https://webpack.js.org/migrate/5/
告诉了我们webpack5 4 3 之间的版本迁移（webpack5最低在Node.js 10.13.0 (LTS)上运行。比如webpack4迁移到webpack5,-> 升级plugins/loaders;更新过时的选项 options，更新webpack到5）