码迷,mamicode.com
首页 > 其他好文 > 详细

一步步搭建现代前端框架(一)

时间:2020-06-16 20:18:36      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:hub   lock   module   mod   根目录   基础   path   为什么   ons   

前言:

因为最近正在做前端开发,发现公司里面用的都是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

一步步搭建现代前端框架(一)

标签:hub   lock   module   mod   根目录   基础   path   为什么   ons   

原文地址:https://www.cnblogs.com/wyy5552/p/13144012.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!