自行配置前端开发环境(一)

开头

最近跟几个小伙伴聊到了如何不使用vue-cli的情况下，自己配置一个使用vue的开发环境。所以就有了写这篇文章的念头，用来总结与记录自己对配置一个开发环境的经验吧

工具与框架的安装

由于个人习惯使用vue，而模块管理工具用的多的是webpack，所以，这里我们就使用webpack来管理与打包开发与生产环境下的包，使用vue来构建页面。

安装

我们新建一个文件夹,并进入该文件夹

mkdir jon-cli
cd jon-cli

npm 初始话

npm init

然后一路yes即可（或者可以使用 npm init -y,可以直接全部yes）

接下俩安装我们的包管理工具webpack

npm install -save-dev webpack webpack-cli

注意：这里的-save-dev 是将webpack安装为开发环境下的，而我们还安装了webpack-cli是因为webpack4.0版本后将webpack与webpack-cli拆分开了。
然后这里还有一个要注意的⚠️：网上有些教程说需要你全局安装webpack-cli，其实是不需要的，而且我这里也建议别那样去做，因为你全局安装了webpack-cli之后可能会许久不更新它，然后你的项目开发版本可能会有所改变，这样的话就会造成版本不兼容的问题。

配置项目文件结构

我们在安装完webpack之后的 jon-cli 目录下已经有了package.json与package-lock.json文件了，现在我们在新建一个src目录与config来存放我们的项目资源与webpack配置文件

mkdir src config

然后我们在config目录下新建三个文件用来才拆分webpack的公共配置、开发环境配置与生产环境配置。

touch webpack.common.js webpack.dev.js webpck.prod.js

在src目录下新建一个main.js文件用来充当webpack的入口打包文件，现在我们的目录是这样的：

执行简单的打包

现在我们来写入webpack的基本配置
打开webpack.common.js写入下面内容

const path = require("path");

let config = {
    mode: process.env.NODE_ENV === "development" ? "development" : "production",
    entry: path.resolve(__dirname, "../src/main.js"),
    output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "bundle.js",
    },
};

module.exports = config;

我们来解释一下上面的配置：
首先webpack是运行在node端的，所以我们是可以使用node自带的包的，我们引入path来处理文件路径；定义一个config对象；

mode：支持两种模式，分别是development开发模式，production生产模式（默认是这个模式），我们也可以不在webpack配置文件中配置mode，可以在npm scripts命令中配置mode模式

webpack --mode=production

entry: 打包入口文件路径
用法：entry: string|Array<string>|{[entryChunkName: string]: string|Array<string>}
在这里我们配置的是一个单页面应用，所以我们先不讨论如何配置多页面应用与entry的具体用发，我们这里的entry的值是一个字符串，表示的是你需要打包的入口文件路径

output: 输出打包后的文件
用法：

output: {
    path: "",        //输出文件路径
    filename: "output[hash][name].js",    
//输出文件名称,可使用[hash]将输出的文件带有哈希值，这样在使用html生成插件时可以插入带有哈希值
的js文件，可在避免出现文件缓存情况；[name]用法是将entry中的key值（对象用法）插入到出口文件中。
}

接下里在webpack.dev.js文件中引入公共配置并将开发环境配置与公共环境配置合并并将其导出

const common = require("./webpack.common");
const merge = require("webpack-merge");


module.exports = merge(common,{

});

这里我们使用的是webpack-merge来合并配置，可以使用 npm install -save-dev webpack-merge安装它

然后我们在mian.js文件中写入一些代码

function test() {
    console.log("this is test function!");
}

在package.json文件中编辑我们的npm scripts命令

"scripts": {
    "start": "NODE_ENV=development webpack --config ./config/webpack.dev.js",
},

现在就能使用npm run start命令在控制台中对文件进行打包了；另外，npm在5.2版本后添加了npx命令，npx是用来调用项目内部安装的模块的，所以我们也可以使用npx webpack直接打包文件。但是我们这里用的是script，其中携带了参数，如写入当前环境是开发环境的NODE_ENV参数和--config的webpack配置文件参数等。

在等打包结束后我们可以看到jon-cli目录下多了一个dist目录，这个就是我们打包后生成的目录，里面有一个js文件，现在我们的目录结构是这样的：

这个js文件的文件名是由我们配置的output选项中的filename属性决定的，那一连串的数字就是我们配置时的[hash]，而[name]为什么没有显示呢，那是因为我们现在的entry使用的是字符串形式，这里的name对应的是entry中的key，对象形式中的key值，所以我们这里是没有的，这里就不细说entry与output了，等下篇如何配置多页面应用时候我们在来细聊。

现在我们可以打开dist下的js文件，在文件中我们可以查找到我们在main.js文件中写的代码（这里就不贴图了）。现在我们就配置完成一个最基本的打包了?。。。