一文搞定webpak5.0 基础环境搭建（一）

最新推荐文章于 2023-06-14 09:26:12 发布
最新推荐文章于 2023-06-14 09:26:12 发布
阅读量145 收藏
点赞数
文章标签： javascript webpack 前端 json vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44022064/article/details/128480381
版权

webpak5.0 基础环境搭建

1、搭建webpack 基础编译环境的第一步首先要安装webpack 和webpack-cli 脚手架

npm install webpack webpack-cli --save-dev

2、脚手架安装完成后，我们要初始化一个webpack 项目
首先要建一个文件夹，这个文件夹不能命名为webpack

npm init -y

3、我们需要在文件夹中创建几个文件index.html 和 index.js

// 执行命令
touch index.js

touch index.html

4、在文件中随便写些内容
在index.js 中写入

console.log('执行成功')
alert('编译成功')

在 index.html中写入

<html>
  <head>
    <meta charset="utf-8" />
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

5、此时我们还需要调整package.json
首先要移除 "main": "index.js"
添加"private": true, 添加这个是说明项目是私有的，不可上传包管理工具
6、创建代码分发 dist 文件夹
执行以下命令

mkdir dist 
cd /dist
touch index.html

在html中写入

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>起步</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
   </head>
   <body>
    <script src="./src/index.js"></script>
    <script src="index.js"></script>
   </body>
 </html>

7、运行npx webpack 看编译效果吧
打开dist 中html 看编译效果吧
参考网址:https://webpack.docschina.org/guides/getting-started/

weixin_44022064
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack5.0最新安装
qq_61541602的博客
05-03 2208
1.首先应该先安装node.js 网址：https://nodejs.org/zh-cn/ 最好选择如图所圈出来的长期维护版，它比较稳定。 在你安装好了后，可通过命令提示符来检测。 打开命令提示符之后，输入：node -v 出现如图所示的版本号（可能版本号不一样），就是安装成功了： 接下来就是配置环境 在node.js所在的文件夹中创建两个文件夹分别为： node_global node_cache 然后在命令提示符中分别输入： npm config set pr.
一文搞定PLC控制柜基础知识
01-20
PLC控制柜有过载、短路、缺相保护等功能。其结构紧凑、工作稳定、功能齐全，可以根据实际控制规摸大小进行组合，既可以实现单柜自动控制，也可以实现多柜通过工业以太网或工业现场总线网络组成集散(DSC)控制系统，能...
简单搭建的 webpack 5 开发环境
m0_37602317的博客
07-26 237
简单搭建的 Webpack 5 开发环境 首先进入目标文件夹 # 初始化项目 npm init -y # 安装 webpack npm i webpack webpack-cli --save-dev # 安装插件 npm i html-webpack-plugin clean-webpack-plugin copy-webpack-plugin --save-dev # js 处理 # 安装 babel npm i @babel/core @babel/preset-env @babel/plugin-t
webpack5.0基础配置（全面）
weixin_40756663的博客
03-01 4422
前言 朋友们好我是跑不快的猪，新的一年，新的开始，先预祝各位都有华丽丽的变身。 本篇文章主要进行webpack5.0+版本的配置，在这个脚手架横行的时代，最终还是需要掌握一些基础的配置，对工作、面试、以及各脚手架中webpack的调试都有不小的作用。接下来会一步步的分享我学习配置中的一些坑和心得，需要代码的朋友请直接滑到页面底部。 概念预热 在学习webpack的过程中，有如下几个概念贯穿始终，在开始之前先列出来。掌握了它们虽然不至于事半功倍，但是对一些配置的理解可能会更简单一点。 module（模块）
webpack安装
zhhao1的博客
08-23 76
webpack安装 1.全局安装 npm install webpack --g npm install webpack-cli --g 2.项目中安装 npm install webpack --save-dev npm install webpack-cli --save-dev npm init -y 导入package.json 使用webpack.config.js文件进行打包的...
新手小白webpack5.0入门笔记 ，5000字长文解释webpack相关概念和运用举例。
weixin_44717047的博客
06-21 316
新手小白webpack入门笔记 ，5000字长文解释webpack相关概念和运用举例。
一文教你如何通过 Docker 快速搭建各种测试环境
09-29
主要介绍了一文教你如何通过 Docker 快速搭建各种测试环境，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一文学会用Tensorflow搭建神经网络
02-24
神经网络是一种数学模型，是存在于计算机的神经系统，由大量的神经元相连接并进行计算，在外界信息的基础上，改变内部的结构，常用来对输入和输出间复杂的关系进行建模。神经网络由大量的节点和之间的联系构成，负责...
一文看懂动力电池的基础知识
01-14
新能源汽车三大(电池、电机、电控)技术，对主机厂工程师而言，动力电池知识是... 人们可能没有思考，水池原来是空的，水池的水是人倒进去的，在水水池的低处钻一个孔，一池子水会放干的。这个过程里有什么科学道理？
最通俗易懂的webpack5 带你简单入门
qq_48046110的博客
10-19 1697
1.什么是webpack？ webpack是用于编译JavaScript模块。 通俗的来说，webpack的一个模块打包器。本质上就是一个构建（包含：编译，压缩，丑化等）工具，且是目前最流行的构造工具。可以对所有资源（.html,.sass,.scss,.css,.png|.jpg|.jpeg,.js|.ts,模板文件ejs,hbs,pug）进行打包。 2.如何安装 2.1cnpm i webpack -g cnpm i webpack-cli -g 或者cnpm i webpack webpack-cli
Webpack 5 新特性
一只路过的小码农
06-28 1662
2. 合并模块 3. 副作用 ： ：标记所有模块无副作用 4. 嵌套的 5. 内部模块 二、长期缓存 1. 相关： ：所有的 文件使用相同的 ，项目中任一文件变化都会影响所有的 文件的 值 ：针对与输出文件，任意文件改变只会影响其依赖的 ，不会影响其它 ：基于单个文件内容产生的 ( 之前只针对于文本结构) 2. 长期缓存： 三、增量构建 默认缓存到 中，当.........
Webpack5.0 新特性尝鲜实战
weixin_34247155的博客
03-12 1160
在老袁写这篇文章的时候，v5版本仍然处于早期阶段，可能仍然有问题。而且作为一个major版本，其中有一些breaking changes，可能会导致一些配置和插件不工作。但这并无妨碍我们去开始对changelog上的新特性进行尝鲜实战。大家如果遇到什么问题可以移步到这进行反馈。另外有关于Webpack4的配置和Compiler->Compilation->Chunk->Modul...
1. 重学webpack——webpack5.0基本概念
2024路在何方
06-23 1003
推荐：《webpack学完这些就够了》 《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。 以下是本节正文： 1. webpack基本概念 webpack支持CommonJs和ES Module 在pacakge.json的scripts中，dev中原先配置使用的webpack-dev-server,现在只小改成ser
使用webpack5，手动搭建vue开发环境
qq_44900902的博客
06-14 874
在vue3.x 项目中需要设置两个变量，以更好地进行 tree-shaking修改以上操作是webpack5搭建vue项目环境全过程了，在实际操作的过程中再次熟悉webpack的配置。Webpack 5.0 从零开始搭建 Vue 开发环境手写webpack创建vue3项目的流程。
一文搞定webpak5.0 基础环境搭建配置篇（二）
weixin_44022064的博客
11-09 124
webpak5.0 基础环境搭建配置篇 书接上篇讲到我们搭建了一个webpack 基础环境，但是这个环境看起来根本没有用，每次都要去改dist 中的html, 很是不方便，于是webpack 配置来了。 那如何去使用webpack 配置呢。 1、webpack配置 首先我们需要在根目录建个webpack配置文件 mac命令如下 touch webpack.config.js 在文件中我们写入下面这...
Webpack学习 - Webpack安装及安装
weixin_30691871的博客
05-13 44
1. 全局安装 npm install -g webpack 2. 项目本地安装 首先建立项目目录，在命令行下进入项目目录。并依次执行以下命令： 1 npm init 2 npm install --save-dev webpack 3. webpack的升级 全新webpack的升级。将“node_modules”目录删除，然后执行安装命令： npm ...
webpack（一）安装和使用
忘川的博客
05-28 244
webpack的安装和使用 1.webpack是什么 webpack是一个基于模块化的打包工具，把一切都视为模块。它是通过开发时态的一个入口模块为起点，分析出里面的依赖关系，然后通过打包和压缩最终形成一个运行时态的文件。 2.webpack的特点 （1）为前端工程化而生 （2）简单易用 （3）生态圈强大 （4）基于模块化和node.js 3.webpack的安装 webpack：核心包 包含webpack构建过程中所有需要用到的api npm install webpack --save-dev webp
webpack学习
er_ba的专栏
10-27 115
说明：webpack5.0 1.安装 >cnpm install webpack webpack-cli --save-dev 2.项目创建 webpack.config.js 3.
01-webpack5安装与使用
dream_s_a的博客
04-27 2013
目录一、安装二、运行三、介绍1、webpack是什么？2、webpack 五个核心概念 环境：windows10+VSCode（1.66.2） 安装版本 node：16.14.2 npm：8.5.0 webpack：5.72.0 webpack：4.9.2 一、安装 1、node安装教程以及全局配置修改 （这里面按照操作到标题四完） 2.node安装配置淘宝镜像 3.本地安装webpack和webpack-cli 在VSCode终端中分别输入以下命令： npm init -y npm install -
一文掌握ubuntu20.04深度学习环境搭建
最新发布
09-16
在Ubuntu 20.04上搭建深度学习环境，可以按照以下步骤进行操作： 1. 首先，安装Ubuntu系统。可以通过制作U盘镜像并进行安装来完成这一步。 2. 安装必要的软件包和工具。使用以下命令安装make、g、cmake和中文输入法： ``` sudo apt-get install build-essential cmake fcitx ``` 3. 安装VS Code。可以从官网下载安装包，并使用以下命令进行安装： ``` sudo dpkg -i visual_code_1.69.2-1658162013_amd64.deb ``` 4. 切换Python版本。根据个人需求，可以选择不同的Python版本。可以使用以下命令来切换Python版本： ``` sudo update-alternatives --config python ``` 5. 安装英伟达显卡驱动。根据自己的显卡型号和需求，选择合适的英伟达显卡驱动进行安装。 6. 明确CUDA版本需求。根据自己的需求，确定所需的CUDA版本。可以从英伟达官网下载相应的CUDA安装包。 7. 安装CUDA。根据所需的CUDA版本，选择下载并安装相应的CUDA安装包。 8. 安装CUDNN。根据所需的CUDNN版本，从英伟达官网下载相应的CUDNN安装包，并按照文档进行安装。 9. 安装NCCL。根据需求，选择下载并安装相应版本的NCCL。 10. 安装PaddlePaddle。可以使用pip命令安装PaddlePaddle，如下所示： ``` pip install paddlepaddle ``` 11. 安装PyTorch。可以使用conda命令或pip命令安装PyTorch，具体安装方法可以参考PyTorch官方文档。 通过以上步骤，您就可以在Ubuntu 20.04上成功搭建深度学习环境了。请根据实际需求和具体情况，按照步骤进行操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值