入口一次配置

在入口多次配置基础上升级

初始化：npm init -y   

安装依赖：npm install --save-dev css-loader file-loader html-loader html-webpack-plugin less less-loader style-loader url-loader jquery extract-text-webpack-plugin webpack webpack-dev-server glob

"devDependencies": {
  "css-loader": "^0.28.7",
  "extract-text-webpack-plugin": "^3.0.2",
  "file-loader": "^1.1.6",
  "glob": "^7.1.2",
  "html-loader": "^0.5.1",
  "html-webpack-plugin": "^2.30.1",
  "jquery": "^3.2.1",
  "less": "^2.7.3",
  "less-loader": "^4.0.5",
  "style-loader": "^0.19.1",
  "uglifyjs-webpack-plugin": "^1.1.4",
  "url-loader": "^0.6.2",
  "webpack": "^3.10.0",
  "webpack-dev-server": "^2.9.7"
}


项目结构：
-root
　　+dist　　　　　　　　自动生成
　　+node_modules  　　自动生成
　　-src
　　　　+css
　　　　+img
　　　　+js
　　　　+views
　　package.json
　　package-lock.json
　　webpack.config.js

具体结构参考 http://www.cnblogs.com/redn/p/8065913.html

webpack.config.js  文件

//引入需要的模块

var path = require('path');
var glob=require('glob');
var webpack = require('webpack');
var ExtractTextPlugin=require("extract-text-webpack-plugin");
var HtmlWebpackPlugin=require("html-webpack-plugin");
var uglifyjsPlugin=require("uglifyjs-webpack-plugin");
var CommonsChunkPlugin=webpack.optimize.CommonsChunkPlugin;

var entries=getEntry('src/js/page/**/*.js','src/js/page');
var chunks=Object.keys(entries);

var config={
    entry:{
        index:"./src/js/page/index.js",
        about:"./src/js/page/about.js",
        list:"./src/js/page/list.js"
    },
    output:{
        path:path.join(__dirname,'dist'),
        publicPath: '/dist/',
        filename:'js/[name].js',
        chunkFilename:'js/[id].chunk.js'
    },
    module:{
        loaders:[
            {
                test:/\.css$/,
                loader:ExtractTextPlugin.extract({
                    fallback:"style-loader",
                    use:[
                        {
                            loader:"css-loader",
                            options:{
                                minimize:true
                            }
                        }
                    ]
                })
            },{
                test:/\.less$/,
                loader:ExtractTextPlugin.extract('css-loader!less-loader')
            },{
                test:/\.html$/,
                loader:"html-loader?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:/\.(png|jpg|gif)$/,
                loader:'url-loader?limit=8192&name=./img/[hash].[ext]'
            }
        ]
    },
    plugins:[
        new webpack.ProvidePlugin({
            $:'jquery'
        }),
        new CommonsChunkPlugin({
            name:'vendors',
            chunks:chunks,
            minChunks:chunks.length
        }),
        new ExtractTextPlugin('css/[name].css'),
        new HtmlWebpackPlugin({
            // favicon:'./src/img/favicon.ico',
            filename:'./views/index.html',
            template:'./src/views/index.html',
            inject:'body',
            hash:true,
            chunks:['vendors','index'],
            minify:{
                removeComments:true,
                collapseWhitespace:false
            }
        }),
        new HtmlWebpackPlugin({
            // favicon:'./src/img/favicon.ico',
            filename:'./views/about.html',
            template:'./src/views/about.html',
            inject:'body',
            hash:true,
            chunks:['vendors','about'],
            minify:{
                removeComments:true,
                collapseWhitespace:false
            }
        }),
        new HtmlWebpackPlugin({
            // favicon:'./src/img/favicon.ico',
            filename:'./views/list.html',
            template:'./src/views/list.html',
            inject:'body',
            hash:true,
            chunks:['vendors','list'],
            minify:{
                removeComments:true,
                collapseWhitespace:false
            }
        }),
        new uglifyjsPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
        contentBase:'./',
        host:'localhost',
        port:9090,
        inline:true,
        hot:true
    }
};

var pages=Object.keys(getEntry('src/views/**/*.html','src/views/'));
pages.forEach(function (pathname) {
    var conf={
        filename:'./views/'+pathname+'.html',
        template:'./src/views/'+pathname+'.html',
        inject:false
    };
    if(pathname in config.entry){
        conf.favicon=path.resolve(__dirname,'src/img/favicon.ico');
        conf.inject='body';
        conf.chunks=['vendors',pathname];
        conf.hash=true
    }
    config.plugins.push(new HtmlWebpackPlugin(conf))
});

module.exports=config;

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.normalize(path.join(dirname,basename));
        pathDir=path.normalize(pathDir);
        if(pathname.startsWith(pathDir)){
            pathname=pathname.substring(pathDir.length)
        }
        entries[pathname]=['./'+entry]
    }
    return entries;
}

package.json配置如前 http://www.cnblogs.com/redn/p/8065913.html

项目代码参考：https://github.com/Rednuo/webpackMuiltPage2.git