码迷,mamicode.com
首页 > Web开发 > 详细

webpack开发配置

时间:2016-07-21 12:43:34      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:

/**
 * webpack打包JS配置
 * @authors Jean Chueng (jean0920@163.com)
 * @date    2016-05-27 17:44:31
 * @version v1.0.0
 */
/****初始设置****/
//服务器地址
var server = "http://common.statics.qq.tt:8080";
//输出环境: ‘/dev/‘表示开发环境;‘/dist/‘表示测试环境
var sEnvironment = ‘/dev/‘;
//运行终端: ‘mobile/‘表示微信端;‘basic/‘表示PC端
var sSystem      = ‘mobile/‘;
//业务模块名: * 为遍历所有业务功能模块
var sFunName     = ‘*‘;
/****End 初始设置****/

var webpack           = require(‘webpack‘);
var path              = require(‘path‘);
var glob              = require(‘glob‘);
var precss            = require(‘precss‘);
var autoprefixer      = require(‘autoprefixer‘);
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);

var srcDir            = path.resolve(process.cwd(), ‘src‘);//返回当前目录绝对路径
//获取多页面的每个入口文件,用于配置中的entry
function getEntry() {
    var entry = {};
    var nLength = sSystem.length - 1;
    //首先我们先读取我们的开发目录 需求功能member 手机端为mobile PC端为basic

    var srcDirName = ‘./src/‘+sSystem+sFunName+‘/*/*.js‘;
    glob.sync(srcDirName).forEach(function (name) {
        var n = name.slice(name.lastIndexOf(sSystem) + nLength, name.length - 3);
        n = n.slice(0, n.lastIndexOf(‘/‘));
        //接着我对路径字符串进行了一些裁剪成想要的路径
        entry[n] = name;
        /*
      index/index_index = "./src/mobile/member/index_index/index.js"
    */
    });
    return entry;
}
module.exports = {
    entry: getEntry(),//入口文件
    output: {
        //输出路径 终端不同时输出路径不同 手机端为mobile PC端为basic
        path: path.join(__dirname,sEnvironment+sSystem),
        publicPath:server+sEnvironment+sSystem,   //用于配置文件发布路径,如CDN或本地服务器
        filename:‘[name].min.js‘,
        chunkFilename: ‘[name].[chunkhash:8].js‘
    },
    resolve: {
        extensions: [‘‘, ‘.js‘, ‘.json‘, ‘.css‘],//自动扩展文件后缀
        alias:{
            ‘resposive‘: path.join(__dirname,‘src/mobile/common/resposive‘),
        }
    },
    module: {
        loaders:[
            { test: /\.css$/,  loader:ExtractTextPlugin.extract(‘style-loader‘,‘css-loader?sourceMap!postcss-loader‘)},
            { test: /\.(png|jpg|gif)$/, loader: ‘url-loader?limit=8192&name=images/[name].[ext]‘},
        ]
    },
    postcss: function(){
        return [
            precss,
            autoprefixer({ browsers: ‘>5%‘ })
        ];
    },
    externals:{
        jquery:‘jQuery‘,
    },
    plugins: [
        //提供全局的变量,在模块中使用无需用require引入
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery",
            "window.jQuery": "jquery"
        }),
        //提取公共模块
        new webpack.optimize.CommonsChunkPlugin({
            name:‘vendor/vendor‘,
            filename:‘[name].min.js‘,
            /* minChunks: 4,
             */        }),
        //单独打包css
        new ExtractTextPlugin(‘[name].min.css‘),
        //文件压缩/混淆
        /*new webpack.optimize.UglifyJsPlugin({
         compress: {
         warnings: false
         },
         mangle: {
         except: [‘$‘, ‘webpackJsonpCallback‘]
         }
         })*/
    ],
    devtool: "source-map",
};

 

webpack开发配置

标签:

原文地址:http://www.cnblogs.com/jeanchueng/p/5691268.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!