详解webpack+express多页站点开发

时间：2021-05-25

学习了webpack门级的教程后，觉得可能是专门为单页应用而量身打造的，比如webpack+react、webpack+vue等，都可以解决各种资源的依赖加载、打包的问题。甚至css都是打包在js里去动态添加到dom文档中的。

那如果我们想要想要多页的普通的web站点，css独立出来，js加载需要模块？

项目地址：webpackDemo_jb51.rar

初始化项目、安装依赖

package.json

"devDependencies": { "css-loader": "^0.23.1", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.5", "html-loader": "^0.4.3", "html-webpack-plugin": "^2.9.0", "jquery": "^1.12.0", "less": "^2.6.0", "less-loader": "^2.2.2", "sass-loader": "^4.0.2", "style-loader": "^0.13.0", "url-loader": "^0.5.7", "webpack": "^1.12.13", "webpack-dev-server": "^1.14.1"}

目录结构（我用的express框架，其他的根据个人需求）

- webpackDemo - src #代码开发目录 - css #css目录，按照页面（模块）、通用、第三方三个级别进行组织 + page + common + lib - js #JS脚本，按照page、components进行组织 + page + components + template #HTML模板 - node_modules #所使用的nodejs模块 - public #express静态资源文件 - dist #webpack编译打包输出目录，无需建立目录可由webpack根据配置自动生成 + css + js + img #图片资源 + view #express静态资源文件（webpack编译打包输出view目录） package.json #项目配置 webpack.config.js #webpack配置

开发页面

在src/js/page目录下建立index.js文件，在src/view目录下建立index.html文件。入口js和模板文件名对应。

index.html 内容如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>首页</title> <!-- 描述：head中无需再引入css以及facicon，webpack将根据入口JS文件的要求自动实现按需加载或者生成style标签 --></head><body> <!-- 描述：body中同样无需单独引入JS文件，webpack会根据入口JS文件自动实现按需加载或者生成script标签，还可以生成对应的hash值 --></body></html>

就是这样一个简单的HTML模板，不要引入任何CSS和JS，通过webpack打包就可以自动帮我们引入。

index.js内容如下：

//引入cssrequire("../../css/lib/base.css");require("../../css/page/index.scss");$('body').append('<p class="text">index</p>');

page1.html:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>page1</title></head><body></body></html>

page1.js:

//引入cssrequire("../../css/lib/base.css");require("../../css/page/page1.less");$('body').html('page1');

webpack配置（我用的express框架，其他的根据个人需求）

var path = require('path');var webpack = require('webpack');var ExtractTextPlugin = require('extract-text-webpack-plugin');/*html-webpack-plugin插件，重中之重，webpack中生成HTML的插件，具体可以去这里查看https://mons', pathname]; conf.hash = true; } config.plugins.push(new HtmlWebpackPlugin(conf));});module.exports = config;

下面的代码和上面的差不多，本质上的区别就是把通过一个方法把所有的相关的文件放到一个对象里这样就完成了自动引入的效果了！

以上均为在mac osx 系统的配置，win7路径可能会有不同

glob: 这边解析出来的不一样：

但要求最终

entries: { index: [ './src/template/index.js' ], page1: [ './src/template/page1.js' ] }pages: [ 'index', 'page1' ]

要以根据个人电脑的配置相应的更改

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章