webpack 初印象

1. 入口文件和出口文件

module.exports = {
  entry: './main.js',  // 入口文件 main.js 
  output: {
    filename: 'bundle.js' //将main 文件打包之后的文件为bundle.js文件
  }
};

1. 入口文件不单一

module.exports = {
  entry: {
    bundle1: './main1.js', //入口文件多个
    bundle2: './main2.js'
  },
  output: {
    filename: '[name].js' //出口文件也是多个 参数name的值为bundle1 或 bundle2
  }
};

1. 编译打包jsx文件

module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react',
      },
    ]
  }
};

1. 在编译之后引入外部库文件

var webpack = require('webpack');
var HtmlwebpackPlugin=require('html-webpack-plugin');
var OpenBrowserPlugin=require('open-browser-webpack-plugin');


module.exports={
  entry:{
    app:'./main.js'
  },
  output:{
    filename:'bundle.js'
  },
  plugins:[
   new webpack.ProvidePlugin({
      $:'jquery',
      jQuery:'jquery',
      "window.jQuery":'jquery'
    }),
   new HtmlwebpackPlugin({
      title:'Webpack-demos',
      template:'template.html', //对应编译到filename文件中的源模板文件
      filename:'index.html'
    }),
    new OpenBrowserPlugin({
      url:'http://localhost:8080'
    }),


  ]
}