一个webpack配置例子

这是一个webpack打包的配置文件例子,已在在线公司生产上使用。代码是 avalon + webpack的单页应用。

/**
 * Created by Lihuanghe on 16/4/21.
 */
var path = require('path');
var webpack = require("webpack");
var CopyWebpackPlugin = require('copy-webpack-plugin'); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); //将组件中的样式乖乖提取出来
var HtmlWebpackPlugin = require('html-webpack-plugin'); //html模板插入代码

//webpck插件
var plugins = [
  new HtmlWebpackPlugin({
    title: "智能短信平台",
    inject:false,
    favicon:'./favicon.ico',
    template: "./app/index.template",
    filename: "index.html",
    xhtml:true,
    hash: false
  }),
   //将样式统一发布到style.css中
  new ExtractTextPlugin("[name].[contenthash:8].css", {
    allChunks: true,
    disable: false
  }),
  // 使用 ProvidePlugin 加载使用率高的依赖库
  new webpack.ProvidePlugin({
    $: 'jquery',
     jQuery: "jquery",
    "window.jQuery": "jquery",
    chart:'chart_ref',
    
    //用webpack加载后,datepicker没有把WdatePicker对象挂在window上,需要手动挂一次,可以在entry入口里调用一下: window.WdatePicker = require('exports?WdatePicker!datepiker');
    WdatePicker:'datepiker'
  }),
  //copy 插件
  new CopyWebpackPlugin([
      {from:'./app/assets/lib/datepiker/'},
      {from:'./app/assets/lib/keditor/'}
    ])
];

var entry = {
        entry: './app/entry.js'
    };
var   buildPath = "./release";

//编译输出路径
module.exports = {
  entry: entry,
  output: {
    path: buildPath,
    filename: 'build.[chunkhash:8].js',
    publicPath: '/ssp/',
    chunkFilename: "[name].chunk.[chunkhash:8].js" 
  },
  module: {
    loaders: [{
      test: /\.css$/,
      loader: ExtractTextPlugin.extract(
        "style-loader", "css-loader?sourceMap")
    }, {
      test: /\.(jpg|png|gif)$/,
      loader: 'url-loader?limit=8192&name=images/[name].[hash:8].[ext]'
    }, {
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "url-loader?limit=10000&minetype=application/font-woff"
    }, {
      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "file-loader"
    },{
      test: /\.swf$/,
      loader: "file-loader"
    }, {
      test: /\.json$/,
      loader: 'json'
    }, {
        test: /\.js$/,
        exclude:/assets[\\\/]lib/,
        loader: 'strict'
      },
       {
      test: /\.(html|tpl)$/,
      exclude:/doublelist/,     //OniUI的不能使用html-loader加载
      //把所有html里的script标签过滤掉
      loader: 'string-replace?{multiple:[{search:"<\s*script[^>]*>.*<\s*/\s*script\s*>",replace:"<script> /* html里不能写js代码,源代码已被删除 */ </script>",flags:"gi"}]}!html?minimize=false'
    }
     ]
  },

  resolve: {
    root: path.resolve('./app'),
    // require时省略的扩展名,如:require('module') 不需要module.js
    extension: ['', '.js', '.css'],
    //别名
    alias: {
      'main' : 'js/main',
    // style : 'assets/lib/css.min',
    'avalon' : 'assets/lib/avalon/avalon.shim',
    'jquery' : 'assets/lib/jquery/jquery',
    'base64' : 'assets/lib/base64/jquery.base64',
    'mmRouter': 'assets/lib/mmRouter-0.5/mmRouter',
    'mmHistory':'assets/lib/mmRouter-0.5/mmHistory',
    'easyui' : 'assets/lib/easyui/jquery.easyui.min',
    'loading' :'assets/lib/jquery/loading/loading-overlay.min',
    'pagination':'assets/lib/pagination/1.2.1/jquery.pagination',
    'blockUI' : 'assets/lib/blockUI/2.64/jquery.blockUI.min',
    'artDialog' : 'assets/lib/dialog/6.0.4/dialog',
    'dialog' : 'assets/common/dialog_amd',
    'wrapper' : 'assets/common/avalonJQcomponent',
    'gloMap':'assets/common/glo_Map',
    'ztree':'assets/lib/ztree/jquery.ztree.core-3.5',
    'ztreecheck':'assets/lib/ztree/jquery.ztree.excheck-3.5',
    'map' :'assets/common/map',
    'sessionMap':'assets/common/sessionMap',
    'ajax' : 'assets/common/ajax_amd',
    'upload':'assets/lib/uploadify/ajaxfileupload',
    'treetable':'assets/lib/treetable/jquery.treetable',
    'svMap' : 'assets/common/svConfig',
    'pager' : 'assets/common/pager_amd',
     'global_ref' : 'assets/common/global',
     'chart_ref':'assets/lib/chart',
    'datepiker' : 'assets/lib/datepiker/WdatePicker',
    'kindeditor' : 'assets/lib/keditor/kindeditor-min'
    }
  },
  plugins: plugins,
  devtool: 'source-map'
};
blog comments powered by Disqus