webpack 多页面模版

前言

webpack是一款模块加载器兼打包工具，能把js,css,页面，图片，视频等各种资源，进行模块化处理。而现在网上流传很多单页面的webpack模型，那多页面呢？比较少，现在我提供一个多页面的前端模型。希望大家适合使用。

功能介绍

这模型是多页面模块打包，模型是用html，你们可以换成自己的jsp,php按你自己的需要来。
通过运行服务，把文件直接打包到dist目录下，dist是编译后的文件，服务直接读取dist目录。而开发文件是放在在src目录下。启动运行服务，会监听src文件的变化进行热更操作直接打包到dist目录。
打包功能包括：sass,雪碧图制作，视频文件（mp4,flv,swf）,js和css文件压缩,图片（png,jpg,gif)，文件（woff,woff2,ttf,eot,svg）。

安装与使用

安装依赖包

npm install –save-dev #部分包需要全局安装 看到失败的包就全局安装一下就行

运行

webpack-dev-server –hot –inline&webpack -w

运行成功查看

127.0.0.1:9090/

打包

webpack

压缩文件打包

webpack -p

文件目录

- website    - src                #代码开发目录        - css            #css目录，按照页面（模块）、通用、第三方三个级别进行组织            + page            + common            + lib        + img            #图片资源            + sprite     #雪碧图            favicon.ico  #图标        + video          #视频文件        - js             #JS脚本，按照page、components进行组织            + page            + components        + view           #HTML模板        index.html       #首页    - dist               #webpack编译打包输出目录，无需建立目录可由webpack根据配置自动生成        + css                        + js        + img        + video        + view        index.html    + node_modules       #所使用的nodejs模块    package.json         #项目配置    webpack.config.js    #webpack配置    README.md            #项目说明

packange

packange.json

{  "name": "webpack-model",  "version": "1.0.0",  "description": "page demo",  "scripts": {  },  "author": "Jarun",  "license": "ISC",  "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",    "plugins": "^0.4.2",    "replace": "^0.3.0",    "style-loader": "^0.13.0",    "url-loader": "^0.5.7",    "vue-hot-reload-api": "^2.0.11",    "webpack": "^1.12.13",    "webpack-dev-middleware": "^1.10.1",    "webpack-dev-server": "^1.16.3",    "webpack-spritesmith": "^0.3.3"  }}

webpack.config

webpack.config.js

var path = require('path');var webpack = require('webpack');var glob = require('glob');var WebpackDevServer = require('webpack-dev-server')var SpritesmithPlugin = require('webpack-spritesmith');/*extract-text-webpack-plugin插件，有了它就可以将你的样式提取到单独的css文件里，妈妈再也不用担心样式会被打包到js文件里了。 */var ExtractTextPlugin = require('extract-text-webpack-plugin');/*html-webpack-plugin插件，重中之重，webpack中生成HTML的插件，具体可以去这里查看https://www.npmjs.com/package/html-webpack-plugin */var HtmlWebpackPlugin = require('html-webpack-plugin');var entries = getEntry('src/js/page/**/*.js', 'src/js/page/');var commonsChunk = getCommonsChunk('src/js/page/**/*.js', 'src/js/page/');var config = {    entry: entries,    output: {         path: path.join(__dirname, 'dist'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它        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')            }, {                //html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源                //比如你配置，attrs=img:src img:data-src就可以一并处理data-src引用的资源了，就像下面这样                test: /\.html$/,                loader: "html?attrs=img:src img:data-src"            }, {                //文件加载器，处理文件静态资源                test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,                loader: 'file-loader?name=fonts/[name].[ext]'            },  {                //视频加载                test: /\.(mp4|flv|swf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,                loader: 'file-loader?name=video/[name].[ext]'            },  {                //图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求                //如下配置，将小于50000byte的图片转成base64码                test: /\.(png|jpg|gif)$/,                loader: 'url-loader?limit=5000&name=img/[hash].[ext]'            }        ]    },    //使用webpack-dev-server，提高开发效率    devServer: {        historyApiFallback:true,        contentBase: './dist',        host: '127.0.0.1',        progress:true,//报错无法识别，删除后也能正常刷新        port: 9090,        inline: true,        hot: true,    },    plugins: [        new webpack.ProvidePlugin({ //加载jq            $: 'jquery',            jQuery:"jquery",            "window.jQuery":"jquery"        }),        new webpack.optimize.CommonsChunkPlugin({            name: 'common', // 将公共模块提取，生成名为`vendors`的chunk            chunks: commonsChunk, //提取哪些模块共有的部分            minChunks: commonsChunk.length // 提取至少3个模块共有的部分        }),        new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath        new SpritesmithPlugin({            src: {                cwd: path.resolve(__dirname, 'src/img/sprite/'),                glob: '*.png'            },            target: {                image: path.resolve(__dirname, 'src/img/sprite.png'),                css: path.resolve(__dirname, 'src/css/common/sprite.sass')            },            apiOptions: {                cssImageRef: "~sprite.png"            }        }),        //HtmlWebpackPlugin，模板生成相关的配置，每个对于一个页面的配置，有几个写几个        new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML            favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值            filename: './index.html', //生成的html存放路径，相对于path            template: './src/index.html', //html模板路径            inject: 'body', //js插入的位置，true/'head'/'body'/false            hash: true, //为静态资源生成hash值            chunks: ['common', 'index'],//需要引入的chunk，不配置就会引入所有页面的资源            minify: { //压缩HTML文件                    removeComments: true, //移除HTML中的注释                collapseWhitespace: false //删除空白符与换行符            }        }),        new webpack.HotModuleReplacementPlugin() //热加载    ]};var viesObj = getView('src/view/**/*.html', 'src/view/')var pages = Object.keys(viesObj);pages.forEach(function(pathname) {    var htmlName = viesObj[pathname]    var conf = {        filename: './view/' + htmlName + '.html', //生成的html存放路径，相对于path        template: './src/view/' + htmlName + '.html', //html模板路径        inject: 'body', //js插入的位置，true/'head'/'body'/false        hash: true, //为静态资源生成hash值        favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值        chunks: ['common',htmlName],//需要引入的chunk，不配置就会引入所有页面的资源        minify: { //压缩HTML文件                removeComments: true, //移除HTML中的注释            collapseWhitespace: false //删除空白符与换行符        }    };    config.plugins.push(new HtmlWebpackPlugin(conf));});module.exports = config;function getView(globPath, pathDir) {    var files = glob.sync(globPath);    var entries = {},        entry, dirname, basename, pathname, extname;    for (var i = 0; i < files.length; i++) {        entry = files[i];        dirname = path.dirname(entry);        extname = path.extname(entry);        basename = path.basename(entry, extname);        pathname = path.join(dirname, basename);        pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname;        entries[pathname] =  basename;    }    return entries;}function getEntry(globPath, pathDir) {    var files = glob.sync(globPath);    var entries = {},        entry, dirname, basename, pathname, extname;    for (var i = 0; i < files.length; i++) {        entry = files[i];        dirname = path.dirname(entry);        extname = path.extname(entry);        basename = path.basename(entry, extname);        pathname = path.join(dirname, basename);        entries[basename] = './' + entry;    }    return entries;}function getCommonsChunk(globPath, pathDir) {    var files = glob.sync(globPath);    var entries = [],        entry, dirname, basename, extname;    for (var i = 0; i < files.length; i++) {        entry = files[i];        dirname = path.dirname(entry);        extname = path.extname(entry);        basename = path.basename(entry, extname);        entries.push(basename);    }    return entries;}