webpack

 准备阶段

　　1.初始化一下项目，生成package.json 

　　　　npm init

　　2.安装webpack

　　　　npm install --save-dev webpack

　　3.新建 webpack.config.js、基本配置

　　　　

var path = require('path'); //引文文件路径
module.exports = {
    entry: ['./src/index'], //入口文件
    output: {
        path: path.join(__dirname, 'dist'), //打包出口文件路径
        filename: 'index.js' //打包文件名
    }
}

　　4.安装css-loader和style-loader

npm install --save-dev style-loader css-loader

　　5.webpack.config.js注册loader

module: {
        loaders: [
              {
                 test: /\.css$/,
                 loader: 'style-loader!css-loader'//添加对样式表的处理
              }
        ]
 }

 　　6.安装react

npm install --save-dev react react-dom

　　7.安装依赖

npm install --save-dev babel-core babel-loader  babel-preset-es2015 babel-preset-react

 

 

一、支持es6

　　1.装loader

npm install --save-dev babel-core babel-loader  babel-preset-es2015 babel-preset-react

　　2.新建 .babelrc. 文件

{  
  "presets": [  
    [  
      "es2015",  
      {  
        "modules": false  
      }  
    ]  
  ]  
}  

　　3.添加loader

{
  test: /\.jsx?$/,
  exclude: /(node_modules|bower_components)/,//要排除node_modules,bower_components下的JS文件
  loader: 'babel-loader',
  query: {
    presets: ['react', 'es2015']//支持react jsx和ES6语法编译
  }
}

 　　4.webpack发射出生产环境和测试环境的命令

npm run eject