详解webpack+express多页站点开发

学习了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><body> </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' ]

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

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

相关文章

最新文章

热门文章

猜你喜欢