一步步搭建现代前端框架(一) | 您所在的位置:网站首页 › webgis前端开发框架 › 一步步搭建现代前端框架(一) |
标签: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 |
CopyRight 2018-2019 实验室设备网 版权所有 |