一步步搭建现代前端框架（一）

前言：

因为最近正在做前端开发，发现公司里面用的都是vue了。反而最原始的html+css+js这种已经很少见了。有时候自己会做一些练习的小项目，如果按照vue脚手架来一遍的话，不仅搭建起来需要各种插件，而且项目打包出来后不管是体积还是性能都有些问题。因此，我想着自己就搭建一个简单的，可以快速实现前端开发的架子。

实现目标：js，css分离，热更新代码，静态资源服务器

1.基础环境

安装nodejs，vscode，这是最基本的配置了

2.初始化项目

创建目录，运行 npm init -y,初始化npm项目工程，此时就可以随意使用npm包进行开发了。

3.使用webpack

为什么要webpack呢？因为我们需要源码进行编译，需要开启服务，需要热更新，如果自己写的话需要大量时间。因此直接用webpack。
安装webpack，npm i webpack webpack-cli -D

4.webpack基本概念

知道webpack的基本概念：入口，出口，加载器，插件；
增加webpack.config.js文件，这个是默认加载的。
此时项目样子：

5.webpack配置

webpack.config.js里面添加基本的配置，入口，出口

const path = require('path');
const config = {
entry:"./src/main.js",
output:{
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module:{
}
}
module.exports = config;

到目前为止，基础的js开发环境已经搭好了。

6.入口html文件

我们创建html文件，将js引入进去

运行，

基础的为本项目搭建完毕。可是此时并没有体现出工作流程的优越性。

• 我们需要自己手动添加js的引用
• 我们运行项目的时候还需要手动刷新打开
• 我们需要手动编译

7.热更+静态资源服务

引入webpack-dev-serverdev-server
npm install webpack-dev-server --save-dev

注意这个，必须填写，路径必须写对，不然不生效

8.html-webpack-plugin

刚刚我们创建的项目，html是我们手动创建，并且加入js的。
这里我们使用另外一个插件，来解决这个问题；

尝试更改filename到dist目录，不行，因此把publicPath，contentBase改成了根目录，
这个时候插件才能成功

注意各种路径，非常容易配置错误，简易直接下载脚手架来拷贝。

9.css文件

缺了个css，我们加入css。
css要在js文件里进行导入
import "./main.css";
console.log("你好");

然后生成的结果：

样式是内嵌到代码里面的；

再来一个插件extract-text-webpack-plugin

上面实现了基本的html+css+js开发的条件。

webpack配置的时候一定要注意路径的配置，可能控制台不报错，但是项目跑起来后浏览器里面就有问题。因此建议先拷贝代码，然后对比自己写的。此外，还有各种版本兼容问题。注意！！！

我们看到，为了实现现代前端，我们新增了很多工具来完成开发；webpack现在越来越复杂了，配置项让人眼花缭乱，各种插件层出不穷。
然而，基本的架子，上面都已经可以满足了。如果有更多需求，只能增加各种配置了。
吐槽：webpack功能越来越强大，但是没用的东西也越来越多。让人感觉头大。

git 地址： https://github.com/wyy5552/mywebsite