webpack配置

不多说直接上配置文件：

var path = require('path');
var webpack = require('webpack');
//引用单独打包模块
var ExtractTextPlugin = require("extract-text-webpack-plugin");


var node_modules = path.resolve(__dirname, 'node_modules');


//每当 "react" 在代码中被引入，它会使用压缩后的 React JS 文件，而不是到 node_modules 中找。
//每当 Webpack 尝试去解析那个压缩后的文件，我们阻止它，因为这不必要
//var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
var deps = [
  'react/dist/react.min.js',
  'react-router/dist/react-router.min.js',
  'moment/min/moment.min.js',
  'underscore/underscore-min.js',
];
var config = {
devtool: 'inline-source-map',  
    debug: true,
    entry: [
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080',
        path.resolve(__dirname, 'app/main.js')       
    ]    
    ,output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    }
    ,plugins:[
     //new ExtractTextPlugin("style/style.css", {allChunks: true})// 配置css 单独打包


    ]
    ,module: {
    loaders: [     
    { test: /\.jsx$/, // 用正则来匹配文件路径，这段意思是匹配jsx
      loader: 'jsx!babel', // 先把es6转为es5再用jsx把react 模板生成
      exclude:/node_modules/
      //loaders:['react-hot','babel']
    },
    //babel 可以将es6代码转换成es5的代码
    { test: /\.js$/, // 用正则来匹配文件路径，这段意思是匹配 js 
      loader: 'babel', // 加载模块 "babel" 是 "babel-loader" 的缩写
      exclude:/node_modules/
      //loaders:['react-hot','babel']
    }    
    ,{
        test: /\.css$/, // Only .css files
        loader: 'style!css' // Run both loaders
    }
    ,{
        test: /\.less$/,
        loader: 'style!css!less'
    }
    ,{
      test: /\.scss$/,
      loader: 'style!css!sass'
    }
    ,{
        test: /\.(png|jpg|jpeg)$/,
        loader: 'url-loader?limit=2000'
    }
    ,{
       test: /\.woff$/,
       loader: 'url?limit=100000'
    }
    ,{
     //使用暴露全局加载器来暴露压缩版的 React JS，???????????
     //比如 react-router 需要这个。
     test:path.resolve(node_modules, deps[0]),
     loader:"expose?React"
    }     
    ,{
     //配置jquery在页面全局访问，也就是在控制器可以访问到$
     //但是模块内用$还是需要引用jquery
     test: require.resolve('jquery'), loader: 'expose?jQuery'
    }     
    ],
    preLoaders: [  //代码检查
       /* {  
          test: /\.jsx?$/,  
          exclude: /node_modules/,  //不检测本文件下的文件
          loader: 'eslint-loader'  //使用的模块
        },  */
    ] ,
    noParse: []//[pathToReact] //不需要解压的文件
   }
   ,resolve:{
      //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
    extensions: ['', '.js', '.json', '.coffee'] ,
    //模块别名定义，方便后续直接引用别名，无须多写长长的地址
    alias:{
     //'react':pathToReact//当引用react时用指定的文件
     //appstore:'js/XX'//直接require('appstore') 引用     
    }
    }
};

// 通过在第一部分路径的依赖和解压
// 就是你像引用 node 模块一样引入到你的代码中
// 然后使用完整路径指向当前文件，然后确认 Webpack 不会尝试去解析它

deps.forEach(function (dep) {
  var depPath = path.resolve(node_modules, dep);
  config.resolve.alias[dep.split(path.sep)[0]] = depPath;
  config.module.noParse.push(depPath);
});

module.exports = config;

使用：

这是针对开发中用的。

需要在package.json内配置：

 "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build",
    "deploy": "webpack -p --config webpack.production.config.js"
  },

这样直接npm run dev就可以运行了。

然后打开localhost:8080就可以访问了。

开发中的js css img jsx 放在app内。而运行时访问的是build下的index.html

页面页需要手动引用bundle.js和webpack-dev-server.

<script src="http://localhost:8080/webpack-dev-server.js"></script>
 <script src="bundle.js"></script>

访问时它不会在build下生成bundle.js文件，而是动态生成。

app.js内需要加载jsx组件，css模块。

最主要的是react.render渲染组件。

app.js内可以用require 引用也可以用es6 import 引入。

配置解析：

entry内配置了启动服务和main目录

output内配置生成目录和文件名

loaders内配置解析文件模块，常用的是js jsx css 图片 等解析。

jsx需要用jsx和bable两个模块解析，从后到前解析的，先babel处理完后再用jsx来处理

babel实现把es6转为es5。

exclude表示不处理的文件夹

图片用url处理，后可以通过?来传递参数，limit表示图片小于XXkb时用base64内联

test: require.resolve('jquery'), loader: 'expose?jQuery'

这比较独特，实现的是在页面全局内可以访问到$

而在模块内还是需要require('jquery')来引用使用的。