webpack+express的多页站点开发实现步骤



这次给大家带来webpack+express的多页站点开发实现步骤，webpack+express多页站点开发的注意事项有哪些，下面就是实战案例，一起来看一下。

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

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

项目地址：webpackDemo_jb51.rar

初始化项目、安装依赖

package.json

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

输出目录，无需建立目录可由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 内容如下：

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

index.js内容如下：

page1.html:

page1.js:

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

输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它 publicPath: '/dist/', //模板、样式、脚本、图片等资源对应的server上的路径 filename: 'js/[name].js', //每个页面对应的主js的生成配置 chunkFilename: 'js/[id].chunk.js' //chunk生成的配置 }, module: { loaders: [ //加载器，关于各个加载器的参数配置，可自行搜索之。 { test: /\.css$/, //配置css的抽取器、加载器。'-loader'可以省去 loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, { test: /\.less$/, //配置less的抽取器、加载器。中间!有必要解释一下， //根据从右到左的顺序依次调用less、css加载器，前一个的输出是后一个的输入 //你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。 loader: ExtractTextPlugin.extract('css!less') }, { test: /\.scss$/, //配置scss的抽取器、加载器。中间!有必要解释一下， //根据从右到左的顺序依次调用scss、css加载器，前一个的输出是后一个的输入 //你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。 loader: ExtractTextPlugin.extract('css!scss') }, { //html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源 //比如你配置，attrs=img:src img:src就可以一并处理src引用的资源了，就像下面这样 test: /\.html$/, loader: "html?attrs=img:src img:src" }, { //文件加载器，处理文件静态资源 test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader?name=./fonts/[name].[ext]' }, { //图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base，减少http请求 //如下配置，将小于8192byte的图片转成base码 test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192&name=./img/[hash].[ext]' } ] }, plugins: [ new webpack.ProvidePlugin({ //加载jq $: 'jquery' }), new webpack.optimize.CommonsChunkPlugin({ name: 'commons', // 将公共模块提取，生成名为`commons`的chunk chunks: ['index','page1'], //提取哪些模块共有的部分 minChunks: 2 // 提取至少2个模块共有的部分 }), new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath //HtmlWebpackPlugin，模板生成相关的配置，每个对于一个页面的配置，有几个写几个 new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML favicon: './src/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值 filename: '../../views/index.html', //生成的html存放路径，相对于path template: './src/template/index.html', //html模板路径 inject: 'body', //js插入的位置，true/'head'/'body'/false hash: true, //为静态资源生成hash值 chunks: ['commons', 'index'],//需要引入的chunk，不配置就会引入所有页面的资源 minify: { //压缩HTML文件 removeComments: true, //移除HTML中的注释 collapseWhitespace: false //删除空白符与换行符 } }), new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML favicon: './src/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值 filename: '../../views/page1.html', //生成的html存放路径，相对于path template: './src/template/page1.html', //html模板路径 inject: true, //js插入的位置，true/'head'/'body'/false hash: true, //为静态资源生成hash值 chunks: ['commons', 'list'],//需要引入的chunk，不配置就会引入所有页面的资源 minify: { //压缩HTML文件 removeComments: true, //移除HTML中的注释 collapseWhitespace: false //删除空白符与换行符 } }) // new webpack.HotModuleReplacementPlugin() //热加载 ], //使用webpack-dev-server，提高开发效率 // devServer: { // contentBase: './', // host: 'localhost', // port: 9090, //默认8080 // inline: true, //可以监控js变化 // hot: true, //热启动 // } };

好了，完成以上的这些配置之后，执行webpack打包命令完成项目打包。

此时，前往views目录下查看生成的index.html文件，如下：

可以看到生成的文件除了保留原模板中的内容以外，还根据入口文件index.js的定义，自动添加需要引入CSS与JS文件，以及favicon，同时还添加了相应的hash值。

两个问题

1. webpack如何自动发现entry文件及进行相应的模板配置

2. 如何直接处理样式、脚本自动引入问题

输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它 publicPath: '/dist/', //模板、样式、脚本、图片等资源对应的server上的路径 filename: 'js/[name].js', //每个页面对应的主js的生成配置 chunkFilename: 'js/[id].chunk.js?[chunkhash]' //chunk生成的配置 }, module: { loaders: [ //加载器 { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css') }, { test: /\.less$/, loader: ExtractTextPlugin.extract('css!less') }, { test: /\.html$/, loader: "html?-minimize" //避免压缩html,https://github.com/webpack/html-loader/issues/50 }, { test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader?name=fonts/[name].[ext]' }, { test: /\.(png|jpe?g|gif)$/, loader: 'url-loader?limit=8192&name=imgs/[name]-[hash].[ext]' } ] }, plugins: [ new webpack.ProvidePlugin({ //加载jq $: 'jquery' }), new CommonsChunkPlugin({ name: 'commons', // 将公共模块提取，生成名为`commons`的chunk chunks: chunks, minChunks: chunks.length // 提取所有entry共同依赖的模块 }), new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath debug ? function() {} : new UglifyJsPlugin({ //压缩代码 compress: { warnings: false }, except: ['$super', '$', 'exports', 'require'] //排除关键字 }), ] }; pages.forEach(function(pathname) { var conf = { filename: '../../views/' + pathname + '.html', //生成的html存放路径，相对于path template: 'src/template/' + pathname + '.html', //html模板路径 inject: false, //js插入的位置，true/'head'/'body'/false /* * 压缩这块，调用了html-minify，会导致压缩时候的很多html语法检查问题， * 如在html标签属性上使用{{...}}表达式，所以很多情况下并不需要在此配置压缩项， * 另外，UglifyJsPlugin会在压缩代码的时候连同html一起压缩。 * 为避免压缩html，需要在html-loader上配置'html?-minimize'，见loaders中html-loader的配置。 */ // minify: { //压缩HTML文件 // removeComments: true, //移除HTML中的注释 // collapseWhitespace: false //删除空白符与换行符 // } }; if (pathname in config.entry) { favicon: './src/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值 conf.inject = 'body'; conf.chunks = ['commons', pathname]; conf.hash = true; } config.plugins.push(new HtmlWebpackPlugin(conf)); }); module.exports = config;

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

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

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

但要求最终

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

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

原生JS如何对多个滚动条同步操作

vue2-webpack2的框架怎么搭建

mint-ui怎样实现无限滚动加载功能