webpack

安装

npm install webpack -g
npm install webpack --save-dev
npm init               //初始化package.json
npm install           //安装package.json中的依赖包

package.json示例

{
  "name": "orion",
  "version": "0.0.1",
  "description": "中英文重构",
  "main": "index.js",
  "scripts": {

"es": "webpack --config webpack.config-es.js -w",
"init": "webpack --display-error-details --config webpack.config-init.js",
"wrap": "webpack --display-error-details --config webpack.config-wrap.js",

"dev": "webpack -w --display-error-details --progress",
"pub": "webpack --display-error-details -p --progress",
"login":"webpack --config webpack.config.login.js -w --display-error-details --progress",
"loginPub":"webpack --config webpack.config.login.js --display-error-details -p --progress"

},
"repository": {
"type": "git",
"url": "git@labs.oa.com:front-end/Orion.git"
},
"keywords": [
"React",
"Webpack"
],
"dependencies": {
"react": "^15.2.0",
"react-dom": "^15.2.0",
"whatwg-fetch": "^1.0.0"
},
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"copy-webpack-plugin": "^3.0.1",
"css-loader": "^0.23.1",
"es6-promise": "^3.2.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.22.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"react-hot-loader": "^1.3.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-md5-hash": "0.0.5",
"whatwg-fetch": "^1.0.0"
},
"dependencies": {
"url-loader": "^0.5.7",
"file-loader": "^0.9.0"
},
"repository": {
"type": "git",
"url": "test"
},
"keywords": [
"test"
],
"author": "跨海侠科技-前端组",
"license": "ISC"
}

配置文件webpack.config.js

var webpack = require('webpack');
module.exports={  
  //插件项
  //plugins: [commonsPlugin],
  entry:{   //入口文件，可以写一个或多个。
    index:'./index.js'  ，
    login：'./login.js',
  },  //入口文件
  output:{    
    path:'',    //输出文件的路径
    filename:'[name].min.js'  //输出文件的名字，[name]代表entry里面的index
    //多个入口文件时，会输出多个对应的输出文件。
  },  
  module:{    
    loaders:[      
      {test: /\.css$/, loader: 'style-loader!css-loader' },       
      //{test: /\.js$/, loader: 'jsx-loader?harmony' }, 
      {test: /\.js[x]?$/,  loader: 'babel-loader?presets[]=es2015&presets[]=react' },      
      {test: /\.less$/, loader: 'style!css!less' },
      {test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
     //图片文件使用 url-loader 来处理，小于8kb的直接转为base64     
      {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}    
    ]  
  }
}