webpack4.8.3开发环境配置

打开命令提示符（Windows+R，然后输入cmd）或者win10系统里底部栏输入cmd搜索一下就出来了。webpack开发环境配置前提是你已经是node环境了，可以在命令提示符里输入

node -v

来检查是不是node环境，如果出现相应版本号，那就是node环境了，如果未出现，需要安装node环境，直接去官网下载安装就可以。假定你已经安装了node

一、全局安装webpack

在命令行输入：

npm install -g webpack

-g就是全局安装

二、全局安装webpack-cli

npm install -g webpack-cli

三、创建项目

假定你想在f盘建一个webpack_demo文件，在命令行输入：

f:

按回车键，这里将转到f盘，然后输入：

mkdir webpack_demo

建立webpack_demo文件，然后输入：

cd webpack_demo

进入这个文件，这个文件就是我们的项目文件目录。

四、初始化工程目录

cd webpack_demo

进入这个目录后，在命令行输入：

npm init

输入完成后，npm终端会问你一些关于项目的名称，描述等等，一堆东西，如果你想写写，就写写，不想写的话就一路回车就可以。完成后，我们发现文件夹种增加了package.json文件，它用于保存关于项目的信息。

五、创建入口文件

我们在webpack_demo文件夹下建一个src的文件夹，然后在src文件下建一个index.js文件，即将'./src/index.js'作为入口

我们可以在index.js文件夹下输入一些代码，例如：

function aaa(){
   alert("asd")
}
aaa()

然后命令行输入：

webpack --mode development

或者：

webpack --mode production

(这个没试过)

然后可以看到根目录webpack_demo下生成了dist目录，并且在dist目录下生成了main.js文件，main.js文件已经打包了src目录下index.js文件中的代码。

未完待续。。。本人小白，之后学了会继续补充。。