webpack安装和基本操作

最新推荐文章于 2024-05-29 21:08:09 发布
最新推荐文章于 2024-05-29 21:08:09 发布
阅读量138 收藏
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44231395/article/details/105022307
版权

一、 webpack :模块化打包工具(把代码进行压缩)
1.建议如果使用webpack都是前后端分离的项目
2.webpack的前身过程: Grunt > gulp>webpack
二、 webpack基本操作: webpack是一个命令要通过npm下载
国外国内区别:下载速度问题，国内的包不完整速度快。
国外命令:​npm install webpack webpack-cli -g
国内cnpm​命令:cnpm install webpack webpack-cli -g
打国内cnpm​命令先去淘宝镜像找下载cnpm的命令；
在这里插入图片描述
即 : npm install-g cnpm--registry=https://registry.npm.taobao.org

​

被抹茶的小白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack安装
qq_39081958的博客
04-17 581
1.  首先要有最新版本的node2. 安装时由于npm过慢，我们使用cnpm淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org 你可能会遇到错误（不支持win32平台） --》解决办法 降低npm的版本 npm install@4.6.1 就可以3. npm init -y(其中scripts 中的两个变量自己...
安装webpack
我的博客
08-25 134
安装webpack遇到个坑，问题的话应该是项目使用的是webpack2.X版本，这样就会覆盖之前的版本，导致项目配置错误。 所以最好不要用全局安装 cd进相关文件夹后 cnpm install -g webpack cnpm init 当前项目安装：cnpm install --save-dev webpack 此时就安装成...
webpack快速入门---webpack的安装和基本使用
最新发布
I_am_shy的博客
05-29 1360
/ 引用nodejs的path模块mode: 'development',//开发环境entry : path.join(__dirname,'src','index.js'),// 打包入口output:{path:path.join(__dirname,'dist'),// 打包结束的位置filename :'bundle.js' // 指定的打包后文件名称},module:{//配置模板rules:[//规则设置test: /\.js$/,//只对js文件生效。
安装 webpack
xiaoguaiwu_的博客
10-16 95
1.本地安装 要安装最新版本或特定版本，请运行以下命令之一： npm install --save-dev webpack npm install --save-dev webpack@<version> 如果你使用 webpack 4+ 版本，你还需要安装 CLI。 npm install --save-dev webpack-cli 对于大多数项目，我们建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。通常，webpa
Webpack安装
科技向善
12-30 136
Webpack4.0 基本操作 小白篇
01-08
文章目录Webpack 基本操作吐槽概述前言webpack是什么呢Webpack的安装项目初始化打包测试样式的处理普通CSS处理sass处理less处理开启 SourceMap处理图片安装 webpack-dev-serverJavaScript 处理vue 组件处理路由 ...
webpack配置配置介绍和操作指引
05-27
这个教程将引导你深入了解 Webpack 的配置和操作，帮助你更好地管理和优化你的前端项目。 ## 一、Webpack 基本概念 Webpack 是一个静态模块打包器，它会分析你的项目依赖，然后将这些模块打包成静态资源。Webpack ...
webpack基本配置
03-08
在“webpack基本配置”中，我们通常会涉及以下几个关键部分： 1. **入口(entry)**：定义应用程序的起点，Webpack 从这个入口开始递归解析依赖并构建模块图。可以是一个字符串，表示单个入口，也可以是一个对象，...
angularjs-webpack:angularJs基本框架
05-18
2. 安装AngularJS和Webpack：运行`npm install angular webpack --save-dev`，这将安装AngularJS库以及Webpack及其开发依赖。 3. 配置Webpack：创建`webpack.config.js`文件，定义Webpack的入口点、输出路径、加载器...
vscode 安装webpack
10-02
要在VSCode中安装webpack，可以按照以下步骤进行操作： 1. 首先，确保你已经在计算机上安装了Node.js和npm。你可以在终端中运行以下命令来验证安装： ``` node -v npm -v ``` 2. 打开VSCode，并在“扩展”视图中搜索并安装“Webpack”扩展。点击扩展列表中的“安装”按钮进行安装。 3. 在你的项目文件夹中创建一个新的文件夹，用于存放webpack相关文件。 4. 在终端中，进入到你的项目文件夹中，并输入以下命令来初始化一个新的npm项目： ``` npm init -y ``` 5. 安装webpack和所需的相关依赖包。在终端中运行以下命令： ``` npm install webpack webpack-cli --save-dev ``` 6. 创建一个webpack配置文件。在项目文件夹中创建一个名为`webpack.config.js`的文件，并添加以下基本配置： ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, }; ``` 7. 在项目文件夹中创建一个`src`文件夹，并在其中创建一个`index.js`文件作为你的入口文件。 8. 运行webpack命令来构建你的项目。在终端中运行以下命令： ``` npx webpack ``` 这将会根据你的配置文件生成一个名为`bundle.js`的文件，并将其放置在一个名为`dist`的文件夹中。 现在，你已经成功地在VSCode中安装了webpack，并且可以开始使用它来构建你的项目了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值