webpack的安装和配置

airborne007 发布于2019-08-22 16:03 / 578人阅读

摘要：的配置问题一直很让人头疼，最近我也在学习，看着网上的教程，也想着把自己的学习过程写下来。首先，配置需要先安装，这是的官网链接描述记得需要以上的版本点开下载包，一路下去，然后我们的就安装完成了，想卸载也可以再点击一次这个安装包来。

webpack的配置问题一直很让人头疼，最近我也在学习webpack，看着网上的教程，也想着把自己的学习过程写下来。
首先，配置webpack需要先安装nodejs，这是nodejs的官网链接描述记得需要node8以上的版本

点开下载包，一路next下去，然后我们的nodejs就安装完成了，想卸载也可以再点击一次这个安装包来uninstall。

接下来是安装webpack
打开cmd命令行，输入

npm install webpack -g

系统就会自动下载安装包 -g代表全局安装
成功应该是如图所示效果

接下来输入

webpack --version

会有下图的提示

提示我们需要webpack-cli
输入

npm i -g webpack-cli

系统会自动给我们安装webpack-cli
之后再输入webapck --version，就会展示我们安装的webpack的版本号了，如图所示

这时候我们全局的webpack变量就安装完啦！

接下来是如何使用webpack了
找到你的项目文件夹，shift+右键，在命令行中打开，此时的目录就是当前目录，然后我们输入

npm init

就会如下图所示，要你写版本号等各种信息什么的，一路回车下去就是了

然后你会发现文件夹中多了一个package.json文件，
接下来在命令行中输入

npm  install webpack --save-dev

-dev是表示开发环境的依赖，也可以取消掉dev这是生成环境的依赖
等待系统安装完毕之后，就会发现在项目文件夹下多了一个node_modules文件夹，此时我们的项目目录的webpack就安装成功了，目录结构入下图所示

这是webapck的安装流程，具体的配置流程我也写了一篇文章链接描述，希望能帮到头疼webpack的大家。

GPU云服务器云服务器配置和安装 lamp安装和配置 hadoop安装和配置 webpack安装

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94009.html

gulp和webpack入门介绍

摘要：介绍说明的包管理器，用于插件管理包括安装卸载管理依赖等使用安装插件命令提示符执行插件名称。总结安装新建文件全局和本地安装安装插件新建文件通过命令提示符运行任务。 showImg(https://segmentfault.com/img/remote/1460000010873466); 前言众所周知目前比较火的工具就是gulp和webpack，但webpack和gulp却有所不同，本...

hsluoyz 2019-08-20 18:58 评论0 收藏0
前端构建_webpack

摘要：一个文件，一张图片一个文件都是一个模块，都能用导入模块的语法的，的导入进来。自身只能读懂类型的文件，其它的都不认识。 webpack 是什么？ webpack是一个前端模块化打包工具指（由于模块化开发，所以需要打包，这里所说的模块化开发主要指JS) 由于现代前端应用程序越来越复杂，需要采用模块化进行开发，但浏览器还未支持模块化开发，所以webpack才诞生 webpack默认只支持js...

ethernet 2019-08-23 14:24 评论0 收藏0
webpak最全的简单入门

摘要：了解什么是官方文档是这样介绍的点我了解官方文档简单的来说，可以看做是模块打包机它做的事情是，分析你的项目结构，找到模块以及其它的一些浏览器不能直接运行的拓展语言，等，并将其转换和打包为合适的格式供浏览器使用。了解webpack 什么是webpack 官方文档是这样介绍的：点我了解官方文档简单的来说，WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaSc...

FreeZinG 2019-08-26 10:46 评论0 收藏0
和webpack打个照面——安装及配置

webpack 安装命令行输入 npm install webpack 配置文件 webpack.config.js moudule.exports = { //Import 入口文件 entry: ./entry.js, //Output dir 输出目录 output: { path: ,//当前目录标识：__dirname filename: } ...

stdying 2019-08-20 12:08 评论0 收藏0
webpack V3.X 入门指南(完)

摘要：通俗的说，预处理器用一种专门的编程语言，进行页面样式设计，然后再编译成正常的文件，以供项目使用。在开发过程中，使用扩展名为的文件来编写样式 webpack 前言这篇文章是我在学习过程中对自己的一个记录和总结，也希望可以帮助到和我当初同样对webpack有困惑的小伙伴我在自学webpack时也参考了很多大神的文章，参考的帖子太多就不一一谢过了，再次感谢各位大神的帮助文章中的每个例...

Object 2019-08-21 17:23 评论0 收藏0