Webpack

最新推荐文章于 2024-08-28 08:23:44 发布

郑宇华

最新推荐文章于 2024-08-28 08:23:44 发布

阅读量1.0k

点赞数

分类专栏：专题文章标签：前端 webpack 模块化 js

本文链接：https://blog.csdn.net/zyh_haha/article/details/87657438

版权

Webpack 是一个模块打包工具，能够将JavaScript和其它浏览器不支持的文件转换并打包。本文介绍了Webpack的优缺点，核心概念如Entry、Output、Loaders、Plugins，以及Hot Module Replacement，并提供了配置和学习资源，帮助读者理解Webpack的模块化开发和工作流程。

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

本系列文章是本人学习相关知识时所积累的笔记，以记录自己的学习历程，也为了方便回顾知识；故文章内容较为随意简练，抱着学习目的来的同学务必转移他处，以免我误人子弟~

webpack学习笔记

根据微信公众号的这篇文章：《你配置Webpack 4的方式可能是错的！》,我配置了一个较完整的webpack学习配置项目，代码以供参考：Github: learnWebpack

本次学习内容来自简书的教程，完整步骤可移步简书原文：《入门Webpack，看这篇就够了》

优点

模块化开发
使用TypeScript
Scss，less，sass等css预处理器

Webpack？

在这里插入图片描述

模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用

开始使用

npm init 创建 package.json 文件
项目安装：yarn add webpack --dev；全局安装：yarn add webpack
创建入口文件 main.js ，指定打包输出文件 bundle.js ；使用命令行执行 webpack ：webpack app/main.js public/bundle.js

webpack 指定唯一的入口文件

执行时报错： One CLI for webpack must be installed.此时需要安装另一个包：webpack-cli （yarn add webpack-cli --dev 或 yarn add webpack-cli）解决参考；！！注意：webpack 和 webpack-cli 需同时全局安装或同时项目安装，否则报错仍存在

package.json中dependencies和devDependencies的区别：Stack Overflow的回答

使用 webpack 配置文件 webpack.config.js ，命令行执行webpack即可
在 package.json 文件对 scripts 对象进行设置，自定义命令行脚本:

"scripts": {
   
    "start": "webpack"
  },

更多关于npm scripts 的信息可移步《阮一峰：npm scripts 使用指南》

Source Maps：易于调试
webpack-dev-server：使用webpack构建本地服务器 – yarn add webpack-dev-server --dev

Loaders

通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件

在webpack.config.js中的modules关键字下进行配置
test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须），如，/(\.jsx|\.js)$/
loader：loader的名称（必须）
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）

Babel

babel-core、babel-preset-env(解析Es6)、babel-preset-react(解析JSX)

babel-preset-env代替了之前的babel-preset-es2015,babel-preset-es2016，可以实现ES6+编译为ES5

import 是 ES6 语法

style-loader,css-loader
less-loader

less-loader 相关配置：

安装：yarn add less --dev,yarn add less-loader --dev

配置：loader: less-loader

转化 less 文件为 css 文件

Plugins

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less…），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。