创建项目 目录1 初始化项目使用 IDE 打开目录在命令行中初化化项目 npm init -y然后安装 webpack cnpm i webpack -D然后
原创
2022-04-15 11:20:53
169阅读
创建项目 目录1 初始化项目使用 IDE 打开目录在命令行中初化化项目 npm init -y然后安装 webpack cnpm i webpack -D然后安装 webpack-cliwebpack-cli 用来执行webpack相关命令 cnpm i webpack-cli -D创建 源代码src目录、打包输出目录 dist目录然后在 src 目录中创建 in...
原创
2021-06-04 15:07:17
226阅读
常用配置说明entry可以接受字符串，数组，对象等多种格式项目打包入口文件，可以是绝对路径也可以是相对路径webpack 打包默认入口文件是 ./src/index.js 约定，默认输出是 项目根目录下 /dist/main.jsoutput 打包后的内容输出相关配置，path打包后文件路径, 只能使用绝对路径常用loader相关理解默认情况下，webpack 值支持.js,.json文件，通过
转载
2021-01-29 10:59:50
557阅读
2评论
文章目录前言一、使用webpack来进行vue-cli模块化开发二、Webpack配置区分开发环境和生产环境三、vue项目打包3.1
原创
2022-05-10 10:26:25
1407阅读
点赞
前言React 、 Webpack 等技术如火如荼，你是不是还在愁苦如何把这些杂乱的知识统统学习一下，开启一段新的前端开发之路呢？本文将以一个例子来讲解如何使用 React 、 Webpack 、Nodejs 、 Express 1. 安装及配置环境 1.1 安装Node.js与NPMNode.js&nbs
转载
2024-07-24 17:18:01
202阅读
对于我来说，第一次接触前后端整合问题的小白，刚开始是一脸懵逼，这个问题整整坑了我一个晚上加一个早上，现在写出来总结；前端开发：vue-cli+webpack；后台开发：nodejs框架express； 前端开发之后，使用localhost能正确访问vue-cli自带的服务器。而在后台方面，一开始我是直接在expres的views和public上开发前端页面，因此在一些配置方面都是上个项目
转载
2024-03-18 10:47:01
388阅读
之前一篇随笔写到vue多环境打包环境配置：https://www.cnblogs.com/shun1015/p/13411636.html 1.区分vue脚手架版本，版本不同，项目结构不同，多环境变量配置方式不同 package.json文件里 scripts对象上配置打包命令 2.打包后的代码如何 ...
转载
2021-08-10 10:41:00
640阅读
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评论
React项目部署1.在github上新建仓库（和以前一样）2.将本地代码提交到github仓库上（和以前一样）3.修改本地React项目的 package.json文件（1）在name和version下面增加"homepage": “https://sgf227.github.io/sgf-react-datawhale/”,其中sgf227是github用户名，sgf-react-datawh
转载
2023-10-19 18:50:58
138阅读
此篇主要是记录下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
299阅读
建议在 React 中使用 CommonJS 模块系统，比如 browserify 或 webpack，本次使用 webpack。 第一步、安装全局包 第二步、创建根目录 创建一个根目录，目录名为：reactApp，再使用 npm init 初始化，生成 package.json 文件： 第三步、添
原创
2022-04-06 11:55:56
631阅读
## 使用Docker打包React项目的步骤
随着现代前端开发的日益复杂，Docker已经成为构建、打包和部署应用程序的重要工具。本文将指导你如何将一个React项目打包成Docker镜像，并为其创建一个可部署的环境。
### 前期准备
在开始之前，请确保你已经安装了以下工具：
1. [Node.js]( - 用于开发React应用。
2. [Docker]( - 用于容器化应用。
接
