平时在开发项目或产品的过程中，我们用到的前端框架是用vue,但是大多数的时候我们会选择使用官方脚手架开发环境，这样虽然方便了很多，但是如果一旦出现问题我们对一些模块的配置不是很清楚就会素手无策，本文就是从头搭建vue,webpack4的环境，因为这个是我们在开发的过程中比较重要的模块。

一、初始化环境

首先我们创建一个空的文件夹vue-webpack,然后cd到这个文件夹，执行npm init -y(这里就暂时不用去填写哪些配置),初始化package.json文件。（为了防止输入的命令有误，每一段命令尽量会配一张图）

$mkdir vue-webpack
$cd vue-webpack
$npm init -y

安装webpack webpack-cli

cnpm i webpack webpack-cli -D

注：cnpm是npm的淘宝镜像( npm install -g cnpm --registry=https://registry.npm.taobao.org )

i 是install的简写，-D 是 --save-dev的简写，开发所用到的模块所以加上-D，线上环境不需要。

这个时候package.json的变化,安装了webpack4,webpack-cli

根目录创建index.html

这里小编用的编辑器是vscode,index.html的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-webpack4</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

根目录创建src文件夹，创建index.js

src/index.js里面的内容是:

document.write('Hello index.js！')

配置package.js编译

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },

添加一个build命令，如下图：

修改index.html

需要修改index.html包含编译完以后的JS，编译操作在下面。

webpack编译

npm run build

如果你习惯用 yarn，直接运行yarn build也可以

这个时候目录下会生成一个dist文件夹，如下图：

运行index.html

这里我的vscode安装了live server，个人开发前端（即使是纯HTML，无需WebServer）还是比较喜欢启动一个web server，

运行结果：

到此为止已经把Webpack(Webpack的官方文档https://www.webpackjs.com/concepts/)的环境搭建完毕，这里就是完成了如何用webpack进行编译，用到的模块：webpack4,webpack-cli,当然真正开发的时候肯定不是这么简单，这里只是实现了一个最简单的配置，后面都会在这个基础上添加各种模块和配置。

四时宝库

程序员的知识宝库

从零开始配置Vue2.x-Webpack4开发环境(一)