express+webpack+bootstrap项目搭建从0做起
2017-06-01 19:30
597 查看
前置需求本文阅读前提条件,已经掌握基本express项目基础,了解webpack工作原理以及webpack单独搭建项目基础
首先我们通过npm指令在随便一个编译器中创建一个webpack的项目,并且安装默认组件
好了,我们这次依然以ejs为模版引擎去创建项目
然后安装我们本次项目需要的一系列模块,步骤省略,详情查看package.json
然后在整理项目结构如图所示
在index .js中修改如下操作
在app.js中做如下修改
好了,我们npm start一下,并且访问http://localhost:3000/index
好了,下面我们构建webpack配置文件
在项目的根目录下创建 webpack.config.js文件
在配置文件中我们做如下配置
然后我们把webpack配置在app.js中用来整合启动
ok,下一步我们直接在tpl中新建index.html并且在main.js中加入一句测试代码
并且重新启动项目访问http://localhost:3000/index
怎么样,已经把webpack整合到了我们的express中,现在就可以引用bootstrap然后开启奇妙的页面搭建之旅了
下面我们在main.js中做如下修改
然后在tpl下的index.html中随意写一些bootstrap的代码
好了,启动项目见证神奇的时刻吧
so,我们可以直接在项目中使用bootstrap以及jquery了,神奇吧
关于代码的详细问题可以联系作者微信keader,
源代码以上传github https://github.com/keaderzyp/web
首先我们通过npm指令在随便一个编译器中创建一个webpack的项目,并且安装默认组件
好了,我们这次依然以ejs为模版引擎去创建项目
然后安装我们本次项目需要的一系列模块,步骤省略,详情查看package.json
然后在整理项目结构如图所示
在index .js中修改如下操作
在app.js中做如下修改
好了,我们npm start一下,并且访问http://localhost:3000/index
好了,下面我们构建webpack配置文件
在项目的根目录下创建 webpack.config.js文件
在配置文件中我们做如下配置
然后我们把webpack配置在app.js中用来整合启动
ok,下一步我们直接在tpl中新建index.html并且在main.js中加入一句测试代码
并且重新启动项目访问http://localhost:3000/index
怎么样,已经把webpack整合到了我们的express中,现在就可以引用bootstrap然后开启奇妙的页面搭建之旅了
下面我们在main.js中做如下修改
然后在tpl下的index.html中随意写一些bootstrap的代码
好了,启动项目见证神奇的时刻吧
so,我们可以直接在项目中使用bootstrap以及jquery了,神奇吧
关于代码的详细问题可以联系作者微信keader,
源代码以上传github https://github.com/keaderzyp/web
相关文章推荐
- 三,express+webpack+react 搭建前后端分离项目(前后端如何进行请求交互)
- 一。express+webpack搭建前端项目(主要说解决的两个问题)
- express+webpack+react搭建项目
- express+webpack+vue.js项目搭建
- vue+webpack+vue-cli+WebStrom 项目搭建
- 快速搭建Web环境 Angularjs + Express3 + Bootstrap3
- webpack搭建项目入门
- 项目实战:webpack的搭建
- Webpack搭建项目 Demo
- 从零开始-使用React+Webpack+Nodejs+Express快速构建项目
- 快速搭建Web环境 Angularjs + Express3 + Bootstrap3
- webpack+vue+bootstrap项目实践
- 快速搭建Web环境 Angularjs + Express3 + Bootstrap3
- 详解用vue-cli来搭建vue项目和webpack
- webpack项目搭建
- websorm环境下,react+webpack搭建项目环境
- 学习使用webpack+vue搭建项目
- vue + webpack 项目环境搭建
- vue.js + element-ui + webpack项目搭建
- 基于AngularJs+Jquery+LayUi+Bootstrap搭建web项目