常用配置说明entry可以接受字符串，数组，对象等多种格式项目打包入口文件，可以是绝对路径也可以是相对路径webpack 打包默认入口文件是 ./src/index.js 约定，默认输出是 项目根目录下 /dist/main.jsoutput 打包后的内容输出相关配置，path打包后文件路径, 只能使用绝对路径常用loader相关理解默认情况下，webpack 值支持.js,.json文件，通过
转载
2021-01-29 10:59:50
557阅读
2评论
使用 antd安装yarn add antd复制代码配置仍然需要使用babel-plugin-import，不过在v4版本的介绍文档中没有该部分说明了，需要到v3版本找 —— antd@v3 - 高级配置yarn add babel-plugin-import -D复制代码只安装babel-plugin-import是不够的，还需要安装less和less-loaderyarn add less l
转载
2021-01-19 22:02:34
364阅读
2评论
安装 TSyarn add typescript -D复制代码安装@types的类型声明包。当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能，声明文件是以index.d.ts的一个文件，一般放在项目的根目录中，或者可以通过package.json中的typings/types属性来指定项目中声明文件的位置。获取一个库类型声明文件有两种方式：一种是该库包含了自己的声
转载
2021-01-19 22:03:00
414阅读
2评论
管理模块module在 webpack 中，每个文件都是一个模块，除了 webpack 认识的 JS 和 JSON 文件，CSS，图片等都是模块，模块之间通过不同方式的语法会产生依赖关系，例如：ES6+的import；CommonJS 的require；AMD 的define和require；css/sass/less 文件中的@import，url(...)；html 文件中可替换元素的src属
转载
2021-01-19 22:11:00
1119阅读
2评论
之前通过一些 webpack 的简单配置，项目可以使用 React 来编写基本组件了，但是每次编写组件，都需要重新执行webpack命令打包，然后再手动在浏览器中打开页面才能看到开发结果，这是十分影响开发效率的，我们要的效果yarn start启动项目运行，在开发过程中使用ctrl+s保存文件，然后页面能自动更新，为此需要配置 HMR 和 webpack-dev-server。开发模式模式（Mod
转载
2021-01-19 22:31:20
619阅读
2评论
resolvewebpack 的底层配置项resolve主要和模块解析的路径相关，常见的例如mainFiles ，extensions等resolve.alias配置模块依赖别名，常见的@解析到src文件夹，path.resolve本身是用来构造绝对路径的，所以@总能解析到src目录的路径module.exports = { resolve: {alias: { '@': path.r
转载
2021-01-19 22:03:21
541阅读
2评论
chunk 和 bundleConcepts - Bundle vs Chunk经常让人摸不着头脑的是 chunk 和 bundle 这两个概念。chunk，翻译过来就是大块，也就是代码块；而 bundle 则是束，包的意思。从 webpack 给出的术语表中是这么解释的：Chunk: This webpack-specific term is used internally to manage
转载
2021-01-19 22:07:28
530阅读
2评论
上篇文章简单介绍了以下webpack内部WDS的使用，这节讨论一下WDS内部proxy的配置方式。devServerwebpack-devServer，一般简称WDS，是 webpack 内置的用于开发环境的服务器配置。webpack本身提供三种方式用于开发环境修改代码以后自动编译，以提高开发效率：观察模式WDSwebpack-dev-middleware总体来说，WDS 配置最容易，并且提供 H
转载
2021-01-19 22:09:40
560阅读
2评论
配置 webpackwebpack 介绍根据webpack官网的解释来说，webpack是一个现代 JS 应用的 bundler，翻译过来就是打包器。webpack会根据模块之间的依赖最终合并模块形成一个或者多个 bundles。安装 webpack 脚手架，以及命令行工具yarn init
yarn global add webpack webpack-cli复制代码修改项目目录添加 dist
转载
2021-01-19 22:33:19
754阅读
2评论
一:配置项目使用 ts 1:如果没有安装typescript 先全局安装npm install -g typescript。 2:在项目根目录下创建tsconfig.json文件，也可以使用tsc --init 的方式生成。大致配置如下： 需要安装ts-loader : npm install ts ...
转载
2021-10-29 17:32:00
138阅读
2评论
原生js：a.head.jsx：functionhead(){varhead=document.createElement('div')head.setAttribute('class','head')head.innerHTML="head"returnhead}module.exports=headb.table.jsx：functiontable(){vartable=document.cr
原创
2018-04-16 06:33:01
1474阅读
点赞
一:配置项目使用 ts 1:如果没有安装typescript 先全局安装npm install -g typescript。 2:在项目根目录下创建tsconfig.json文件，也可以使用tsc --init 的方式生成。大致配置如下： 需要安装ts-loader : npm install ts ...
转载
2021-10-29 17:32:00
228阅读
2评论
1、首先创建一个文件夹demo02，并打开cmd 进入到demo02 文件夹中项目初始化：cnpm init -
原创
2022-07-08 06:23:48
73阅读
一、 使用create-react-app创建react应用1.1. react脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置（语法检查、jsx编译、devServer…）下载好了所有相关的依赖可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库: create-react-app项目的整体技术架构为: re
转载
2024-07-30 14:49:09
544阅读
基本安装
首先创建一个文件夹webpack-demo(名字自取)，然后在本地安装webpack，接着安装webpack-cli
npm init -y
npm install webpack webpack-cli --save-dev
然后在主文件夹下新建一个src和public子文件夹和webpack.config.js配置文件
在子文件夹public中新建index.html(此文件为入
原创
2023-08-28 20:01:35
853阅读
点赞
前言我们知道前端的框架纷繁复杂，各有各的优点。而我们选择使用React作为开发框架的
原创
2022-09-11 01:18:31
188阅读
搭建视频：https://zhuanlan.zhihu.com/p/406514947 ...
转载
2021-09-27 15:00:00
196阅读
2评论
此篇主要是记录下webpack构建react项目的过程。前言：为什么想起来通过webpack去构建react的项目呢？现在可以通过cra或者vite或其他脚手架去构建比较省事。主要还是想要了解下webpack相关的知识，如果对webpack构建以不敢兴趣可以等后续笔者发布关于TSX的相关知识1、webpack、webpack-cli既然通过webpack构建项目，首先离不开两个包webpack w
推荐
原创
2023-03-24 17:46:16
1736阅读
点赞
1.快速创建React项目 npm install -g create-react-app // 全局安装create-react-app (只需要安装一次) cre
原创
2022-06-16 13:10:12
302阅读
目录：1. 前期准备2. Create React App3. 工具及插件 安装第三方插件 安装 bootstrap 执行 eject4. 在线 React 创建 前期准备1. 安装 Node.js。同时建议安装 nvm，nvm 用于进行 Node 版本的控制。2. 安装编辑器，比如 VSCODE。 Create React AppCreate React App 官网：
转载
2024-01-16 14:42:41
200阅读
