ly_auto/demo/default/webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var fs=require("fs");
var path=require("path");
var webpack=require("webpack");
var _=require("underscore");
// 打包路径设置
var packUrl="";


function SetOptions(options){
    this.options=options;
    return this.init(options);
};
_.extend(SetOptions.prototype,{
    init:function(options){
        this.config={
            entry:this.genEntries(),
            module:{
                //加载loader处理文件
                rules:[
                    {
                        test:/\.css$/,
                        use: ExtractTextPlugin.extract({
                            fallback: "style-loader",
                            use: "css-loader"
                        })
                    },
                    {
                        test:/\.less$/,
                        use: ExtractTextPlugin.extract({
                            fallback: "style-loader",
                            use: ['css-loader', 'less-loader']
                        })
                    },
                    {
                        test:/\.scss$/,
                        use: ExtractTextPlugin.extract({
                            fallback: "style-loader",
                            use: ['css-loader','sass-loader']
                        })
                    },
                    {
                        test: /\.md$/,
                        use: [
                            {
                                loader: "html-loader"
                            },
                            {
                                loader:path.resolve(__dirname,"tool/markdown.js")
                            }
                        ]
                    },
                    {
                        test:/\.vue$/,
                        use:['vue-loader']
                    },
                    {
                        test:/\.hbs$/,
                        use:['handlebars-loader']
                    },
                    {
                        test:/\.(js|jsx)$/,
                        exclude: /(node_modules|bower_components)/,
                        use:[
                            {
                                loader: 'babel-loader',
                                options: {
                                    presets:["react","env"],
                                    plugins:[]
                                }
                            }
                        ]
                    },
                    {
                        test:/\.(jpg|png|gif)$/,
                        use:{
                            loader:"file-loader",
                            options:{
                                limit:8129,
                                name:"images/[name]-[hash:8].[ext]"
                            }
                        }
                    }
                ]
            },
            //开发工具--追踪错误源位置
            devtool:"eval",
            resolve: {
                //查找模块的路径
                modules: [path.resolve(process.cwd(),"node_modules")],
                //模块别名列表
                alias: {
                    'vue': 'vue/dist/vue.js',
                    "tool":path.resolve(__dirname,"tool/"),
                    "images":path.resolve(__dirname,"images/")
                },
                //自行补全路径中文件的后缀, 第一个是空字符串，对应不需要后缀的情况
                extensions: ['.vue','.js', '.html', '.css', '.jsx','.swig','.less','.sass','.scss','.png','.gif','.jpg']
            },
            mode:"development",
            // 处理loader
            resolveLoader:{
                modules: [path.resolve(process.cwd(),"node_modules")],
                // 自动补全loader后缀
                moduleExtensions: ['-loader']
            },
            externals: {
                'react': 'React',
                'react-dom': 'ReactDOM',
                "vue":"Vue",
                "vueRouter":"vueRouter",
                'zepto': 'Zepto',
                "echarts":"echarts",
                'jQuery':'window.jQuery',
                '$':'window.jQuery',
                'jquery': 'window.jQuery'
            },
            plugins:[
                // 输出独立的css文件,如果有多个入口JS共用的CSS,会生成commons.css
                new ExtractTextPlugin({filename:"css/[name].css",allChunks:true})
            ],
        }

        this.htmlReg=/(.+)\.(html|swig)$/;
        this.htmlFiles=fs.readdirSync("./html");

        if(options.isServer){
            this.server();
        }else{
            this.pack();
        }

        return this.config;
    },
    // 打包项
    pack:function(){
        var self=this;
        self.config.output={
            path:__dirname+"/build",
            publicPath:packUrl,
            filename:"js/[name].min.js"
        }

        self.htmlFiles.forEach(function(item){
            var m=item.match(self.htmlReg);
            if(self.htmlReg.test(item)){
                self.config.plugins.push(
                    new HtmlWebpackPlugin({
                        template: 'html-withimg-loader!./html/'+item,
                        inject: 'body',
                        chunks:["common",m[1]],
                        filename:""+item,
                        title: '最美奥运脸'
                    })
                )
            }
        })
    },
    // 开启服务项
    server:function(){
        var self=this;
        self.config.output={
            // path:__dirname+"/public",
            publicPath:"/public/",
            filename:"js/[name].js"
        }

        var links=[];
        self.htmlFiles.forEach(function(item){
            var m=item.match(self.htmlReg);
            if(m&&m[0]){
                var fileContent = fs.readFileSync(
                    path.resolve("./html", item), "utf-8");
                var title = fileContent?(/<title>[^<>]*<\/title>/i).exec(fileContent)[0]:"";
                title = title.replace(/<\/?title>/g, '');
                links.push('<li><a href="'+self.config.output.publicPath+item+'">'+title+'--'+item+'</a></li>');
                self.config.plugins.push(
                    new HtmlWebpackPlugin({
                        template: 'html-withimg-loader!./html/'+item,
                        // inject: 'body',
                        filename:""+item,
                        chunks:["common",m[1]],
                        title: '最美奥运脸'
                    })
                )
            }
        })
        self.config.plugins.push(
            new HtmlWebpackPlugin({
                templateContent: '<!DOCTYPE html>'
                +'<html lang="en">'
                +'<head>'
                +'<meta charset="UTF-8">'
                +'<meta name="description" content="">'
                +'<meta name="keywords" content="">'
                +'<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">'
                +'<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />'
                +'<title>开发首页</title>'
                +'</head>'
                +'<body>'
                +'<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>'
                +'<ul>'+links.join("")+'</ul>'
                +'</body>'
                +'</html>',
                inject: 'body',
                chunks:[],
                filename:"menu.html",
                title: '最美奥运脸'
            })
        )
    },
    // 设置入口文件
    genEntries:function(){
        var jsReg=/(.+)\.(js)$/;
        var jsFiles=fs.readdirSync("./js");
        var map={};
        jsFiles.forEach(function(item){
            var m=item.match(jsReg);
            if(m){
                var entryName=m?m[1]:"";
                map[entryName]="./js/"+m[0];
            }
        });
        return map;
    }
})

module.exports=SetOptions;