webpack安装及踩的坑

1.webpack安装

  1. 首先下载node,官网傻瓜式下载即可,下载完了如下
    在这里插入图片描述
  2. 由于node 中自带 npm ,打开 cmd ,安装 nrm ,输入npm i nrm -g

nrm 指的是镜像地址,指你用哪个地址下载。可以输入 nrm ls 来查看当前使用的 nrm,如下

在这里插入图片描述

  1. 安装完毕后选择 nrm ,我这里选择的是taobao
  2. 全局安装 webpack4.0.0 版,输入 npm install webpack@4.0.0 -g
  3. 本地安装webpack4.0.0版,npm --save-dev webpack@4.0.0

注意:安装时要选定版本(稳定版),不选定版本会默认为安装最近版,可能会出现问题

到这里 webpack 安装完成可以在项目中使用了

2.由于版本问题所踩的坑

由于博主刚开始安装没指定版本,在操作项目使用 webpack 时出现了许多问题,于是卸载了安装的webpack,安装了稳定版本,指令如下

  1. 删除全局webpack-cli

npm uninstall -g webpack-cli

  1. 删除本地(局部)webpack-cli

npm uninstall webpack-cli

  1. 删除全局webpack

npm uninstall -g webpack

  1. 删除本地webpack

npm un webpack

  1. 安装指定版本webpack,选择稳定版本,全局安装webpack3.0.0版

npm install webpack@4.0.0 -g

  1. 本地安装webpack4.0.0版

npm install --save-dev webpack@4.0.0

  1. 项目初始化,

npm i

  1. 运行webpack打包命令,dist文件出现,ok成功!

webpack

3.打包过程中的问题

在通过vs code 运行webpack进行打包时,报错webpack : 无法加载文件 D:\nodejs\node_global\webpack.ps1,因为在此系统上禁止运行脚本。

解决方案:
以管理员身份运行vs code
终端执行:get-ExecutionPolicy,显示Restricted,表示状态是禁止的
终端执行:set-ExecutionPolicy RemoteSigned
这时再执行get-ExecutionPolicy,就显示RemoteSigned
此时发现再进行打包就没有问题了

作者:jackie_su
链接:https://www.jianshu.com/p/4c7a86f1596a
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
提供的源码资源涵盖了Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试,可以直接运行,可以放心下载使用。有任何使用问题欢迎随时与博主沟通,第一时间进行解答!
要下载和安装 webpack,您可以按照以下步骤进行操作: 1. 首先,确保您已经安装了 Node.js。您可以在命令行中运行 `node -v` 来检查是否已安装。如果未安装,请前往 Node.js 的官方网站(https://nodejs.org/)下载并安装最新版本。 2. 安装完成后,您可以使用 npm(Node 包管理器)来安装 webpack。在命令行中运行以下命令: ``` npm install -g webpack ``` 这将全局安装 webpack。 3. 如果您使用的是 webpack 4 或更高版本,还需要安装 webpack-cli。运行以下命令进行安装: ``` npm install -g webpack-cli ``` 4. 安装完成后,您可以创建一个新的项目文件夹,并在其中初始化一个新的 npm 包。在命令行中导航到您想要创建项目的文件夹,并执行以下命令: ``` npm init -y ``` 这将使用默认设置初始化一个新的 npm 包。 5. 接下来,您需要在项目中安装 webpack 和其他相关的依赖项。运行以下命令进行安装: ``` npm install webpack webpack-cli --save-dev ``` 这将在项目中安装 webpackwebpack-cli,并将其作为开发依赖项保存到 package.json 文件中。 6. 安装完成后,您可以创建一个 webpack 的配置文件。在项目根目录下创建一个名为 `webpack.config.js` 的文件,并在其中配置 webpack 的选项。 7. 配置文件创建完毕后,您可以在命令行中运行 webpack 命令来构建项目。例如,运行以下命令来构建项目的入口文件(默认为 `src/index.js`): ``` webpack ``` 这将根据 webpack 配置文件中的设置,将项目打包到指定的输出目录(默认为 `dist/main.js`)。 这样,您就完成了 webpack 的下载和安装过程。您可以根据自己的需求进一步配置 webpack,并使用其强大的功能来构建和优化您的前端项目。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值