2024年最新Webpack 安装使用(详细步骤)(2),算法太TM重要了

最后

喜欢的话别忘了关注、点赞哦~

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端校招面试题精编解析大全

$ brew install npm

  • 安装完成之后,检查是否安装成功

dengzemiaodeMacBook-Pro:~ dengzemiao$ npm -v

6.13.0

dengzemiaodeMacBook-Pro:~ dengzemiao$ node -v

v12.9.1


  • 安装 Webapck、Webpack-cli

1、安装 webpack

// 安装

$ npm install webpack -g

// 移除

$ npm uninstall webpack -g

dengzemiaodeMacBook-Pro:~ dengzemiao$ npm install webpack -g

npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.

/usr/local/bin/webpack -> /usr/local/lib/node_modules/webpack/bin/webpack.js

fsevents@1.2.13 install /usr/local/lib/node_modules/webpack/node_modules/watchpack-chokidar2/node_modules/fsevents

node install.js

SOLINK_MODULE(target) Release/.node

CXX(target) Release/obj.target/fse/fsevents.o

SOLINK_MODULE(target) Release/fse.node

npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {“node”:“<8.10.0”} (current: {“node”:“12.9.1”,“npm”:“6.13.0”})

npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0

  • webpack@4.43.0

added 347 packages from 210 contributors and updated 1 package in 38.597s

2、安装 webpack-cli,webpack 现在新版本需要依赖于这个脚手架。

// 安装

$ npm install webpack-cli -g

// 移除

$ npm uninstall webpack-cli -g

dengzemiaodeMacBook-Pro:~ dengzemiao$ npm install webpack-cli -g

/usr/local/bin/webpack-cli -> /usr/local/lib/node_modules/webpack-cli/bin/cli.js

npm WARN webpack-cli@3.3.12 requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself.

  • webpack-cli@3.3.12

added 185 packages from 127 contributors in 20.243s

最后

技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。

ttps://bbs.csdn.net/topics/618166371)**

技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。

[外链图片转存中…(img-1ZikZKWi-1715103191526)]

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目使用Webpack的步骤如下: 1. 安装Vue CLI 我们可以通过以下命令全局安装Vue CLI: ``` npm install -g @vue/cli ``` 2. 创建Vue项目 我们可以通过以下命令创建Vue项目: ``` vue create my-project ``` 其中,my-project为项目名称。 3. 安装Webpack 在Vue项目中使用Webpack需要安装相关依赖,可以通过以下命令安装: ``` npm install webpack webpack-cli --save-dev ``` 4. 配置Webpack 在Vue项目中使用Webpack需要进行相关配置文件的编写。我们可以在根目录下创建一个webpack.config.js文件来配置Webpack。 一个简单的Vue项目Webpack配置文件如下: ``` const path = require('path'); module.exports = { mode: 'development', entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader' }, { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } } }; ``` 其中,mode字段表示Webpack的模式,可以设置为development或production;entry字段表示入口文件;output字段表示输出文件;module字段表示模块加载器;resolve字段表示模块解析器。 5. 修改package.json 我们需要在package.json文件中添加一些脚本来方便使用Webpack。例如,我们可以将以下代码添加到scripts字段中: ``` "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production" } ``` 这样就可以通过运行`npm run dev`进入开发模式,运行`npm run build`构建生产环境文件。 这就是Vue项目使用Webpack详细步骤

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值