webpack4.0--如何安装和配置（一）

前言

一直计划想把webpack系统的学一遍，现在终于开始了，接下来会分享我从零开始学习的过程，记录自己，分享他人，这篇文章主要分享安装和配置，也就是文档中Getting Started的学习。

如何安装webpack

环境配置：在学习webpack之前，先配置一下node环境，下载node，傻瓜式安装就行了，最好是选择稳定版本的node，不要选择最新版本的。在这里我的版本是v10.15.3版本
在桌面中创建webpack-demo文件夹，命令创建：mkdir webpack-demo 进入webpack-demo文件夹
进入文件夹后初始化这个项目，命令：npm init
初始化后会有很多配置项，名字、版本、描述，可以不用管一路回车创建就行了，文档中也有提到，如果你不想填写这些配置，那就执行npm init -y就可以
在编辑器里面打开项目，在这里我进行了增删改的操作，因为目前有些东西用不到也不需要，原有的样子

整理后：private的配置意思是私有项目，不会上传到npm库里。
初始化完毕之后开始安装webpack，有两种方式安装webpack
第一种：全局安装，命令：npm install webpack webpack-cli -g 安装webpack同时安装webpack-cli工具（安装webpack-cli的作用就是能让webpack打包命令顺利执行）
注意：一般不要去安装全局，因为你不可能所在公司的所有项目webpack都是一个版本，但是如果你要是启动两个以上的项目的话由于版本不一样肯定会遇到项目无法启动的问题，所以还是在本项目中去安装比较好
删除全局webpack命令：npm uninstall webpack webpack-cli -g 这样就删除了，查看版本也找不到了

第二种：项目安装，命令：npm install webpack webpack-cli --save-dev 或者直接-D
我这里的webpack版本是4.31.0，可以根据npm install webpack@版本号 webpack-cli -D 安装自己指定的版本
查看项目

手动配置文件

在根目录创建webpack.config.js文件（wenbpack在打包的时候回去默认寻找这个文件，如果不是这个文件名，那么打包过程就会报错，当然你也可以改变这个默认文件，你可以执行npx webpack --config 你想起的名字.js，这样打包的时候webpack就会去寻找你想设置的配置文件）
注意：__dirname是两个下划线
执行npx webpack 命令进行打包
其实你也可以设置成类似vue那种执行 npm run build 那种进行打包，但是需要配置一下
打包后整理文件，无报错

总结

以上就是webpack4版本的开始安装和简单的配置，通俗易懂，如果你也想学习webpack4，你可以关注我，我们一起学习，这只是一个开始，后期每周至少更新一篇（因为最近工作比较紧张，所以我只能抽时间去学习和写文章），持续更新中~~~~~~~~~给个小小的赞让我们不断前行吧！！！

转载于:https://juejin.im/post/5cd68184f265da035a1f3b46

webpack4.0--如何安装和配置（一）相关推荐

mysql8.0卸载出现问题,Windows环境下MySQL 8.0 的安装、配置与卸载
软件版本 Windows:Windows10 MySQL:mysql-8.0.17-winx64.zip 安装步骤 1.配置环境变量 2.新建my.ini文件文件位置:C:\Program File ...
CentOS-7.0.中安装与配置Tomcat-7的方法
CentOS-7.0.中安装与配置Tomcat-7的方法原创 2014年11月24日 23:38:36 72472 安装说明安装环境:CentOS-7.0.1406 安装方式:源码安装软件: ...
mysql8.0.12插件_MySQL8.0.12 安装及配置
MySQL8.0.12 安装及配置发布时间:2018-08-07 10:39, 浏览次数:274 , 标签: MySQL 一.安装 1.从网上下载MySQL8.0.12版本,下载地址:https:/ ...
安装mysql8.0配置环境_Windows环境下MySQL 8.0 的安装、配置与卸载
软件版本 Windows:Windows10 MySQL:mysql-8.0.17-winx64.zip 安装步骤 1.配置环境变量 name:Path value:C:\Program Files\ ...
webpack4.0.1安装问题及解决方法
webpack4.0.1安装问题及解决方法参考文章: (1)webpack4.0.1安装问题及解决方法 (2)https://www.cnblogs.com/cythia/p/8495341.htm ...
MyEclipse7.0及JDK1.6.0的安装及配置过程(修改)
一.MyEclipse7.0安装及注册: 1.第一次改路径,直接将C盘改成D或者其他盘符就OK 2.第二次改路径,将WORKSPACE直接改为D盘根目录下或者其他盘符根目录下 3.注册MyEclips ...
MySQL8.0.22安装及配置(超详细)
MySQL8.0.22安装及配置(超详细) 大家好,今天我们来学习一下 MySQL8.0.22安装及配置,好好看,好好学,超详细的第一步进入MySQL官网下载,如下图所示: 第二步进入下载完成后 ...
skywalking-6.0.0-GA安装及配置
2019-01-31 官方从6.0.0-beta版更新为6.0.0-GA,今天刚去看了下,刚好觉得还有些地方需要修改了.顺带直接更新到6.的正式版. https://github.com/apache ...
【Linux环境部署】最新版 elasticsearch + kibana（7.15.0）安装、配置、启动（多个问题处理 + kibana仪表盘使用）
本文的安装文件是 2021.09.23 最新发布的[elasticsearch-7.15.0-linux-x86_64.tar.gz]和[kibana-7.15.0-linux-x86_64.tar. ...

webpack4.0--如何安装和配置（一）

前言

如何安装webpack

手动配置文件

总结

webpack4.0--如何安装和配置（一）相关推荐

最新文章

热门文章