前置需求本文阅读前提条件,已经掌握基本express项目基础,了解webpack工作原理以及webpack单独搭建项目基础

首先我们通过npm指令在随便一个编译器中创建一个webpack的项目,并且安装默认组件

express+webpack+bootstrap项目搭建从0做起

好了,我们这次依然以ejs为模版引擎去创建项目

然后安装我们本次项目需要的一系列模块,步骤省略,详情查看package.json

express+webpack+bootstrap项目搭建从0做起

然后在整理项目结构如图所示

express+webpack+bootstrap项目搭建从0做起

在index .js中修改如下操作

express+webpack+bootstrap项目搭建从0做起

在app.js中做如下修改express+webpack+bootstrap项目搭建从0做起

好了,我们npm start一下,并且访问http://localhost:3000/index

express+webpack+bootstrap项目搭建从0做起

好了,下面我们构建webpack配置文件

在项目的根目录下创建 webpack.config.js文件

在配置文件中我们做如下配置

express+webpack+bootstrap项目搭建从0做起express+webpack+bootstrap项目搭建从0做起express+webpack+bootstrap项目搭建从0做起

然后我们把webpack配置在app.js中用来整合启动

express+webpack+bootstrap项目搭建从0做起

ok,下一步我们直接在tpl中新建index.html并且在main.js中加入一句测试代码

express+webpack+bootstrap项目搭建从0做起express+webpack+bootstrap项目搭建从0做起

并且重新启动项目访问http://localhost:3000/index

express+webpack+bootstrap项目搭建从0做起

express+webpack+bootstrap项目搭建从0做起

怎么样,已经把webpack整合到了我们的express中,现在就可以引用bootstrap然后开启奇妙的页面搭建之旅了

下面我们在main.js中做如下修改

express+webpack+bootstrap项目搭建从0做起

然后在tpl下的index.html中随意写一些bootstrap的代码

express+webpack+bootstrap项目搭建从0做起

好了,启动项目见证神奇的时刻吧

express+webpack+bootstrap项目搭建从0做起

express+webpack+bootstrap项目搭建从0做起

so,我们可以直接在项目中使用bootstrap以及jquery了,神奇吧

关于代码的详细问题可以联系作者微信keader,

源代码以上传github https://github.com/keaderzyp/web



相关文章:

  • 2022-12-23
  • 2021-06-30
  • 2022-02-12
  • 2021-05-19
  • 2021-12-02
  • 2022-12-23
猜你喜欢
  • 2021-09-13
  • 2021-08-21
  • 2021-10-19
  • 2021-11-29
  • 2022-12-23
  • 2021-07-27
相关资源
相似解决方案