webpack配置

一、安装 1、安装nodejs，自带已经安装了npm，使用淘宝镜像 $ npm install webpack -g 二、生成package.json文件 $ npm init 安装相应的库以及babel

{
  "name": "react_demo",
  "version": "1.0.0",
  "description": "test",
  "main": "app/main.js",
  "scripts": {
    "build": "webpack",
    "compress": "webpack -p",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  },
  "repository": {
    "type": "git",
    "url": "xx"
  },
  "keywords": [
    "xx"
  ],
  "author": "lsq",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-runtime": "^6.11.6",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "less-loader": "^2.2.3",
    "node-sass": "^3.9.3",
    "react": "^15.3.1",
    "react-hot-loader": "^3.0.0-beta.3",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1"
  },
  "dependencies": {
    "react-dom": "^15.3.1",
    "react-hot-loader": "^3.0.0-beta.4",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1"
  }
}

三、配置webpack.config.js 新建文件webpack.config.js

var path=require('path');
var node_modules=path.resolve(__dirname,'node_modules');
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

module.exports = {
	//入口
	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'
	},
	//解决方案
	resolve:{
		extensions:['','.js','.jsx']
	},	
	module:{
		//加载器
		loaders:[
			{test: /\.jsx?$/,loader: 'babel', exclude: /node_modules/,query: {cacheDirectory: true,presets: ['react', 'es2015']}},
      		{test: /\.css$/, loader: ExtractTextPlugin.extract('style','css')},
      		{test: /\.less$/, loader: 'style!css!less'},
      		{test: /\.scss$/, loader: ExtractTextPlugin.extract('style','css!sass')}
		]
		// noParse:[pathToReact]//不再重新打包reactjs
	},
	babel:{
		presets:['es2015','stage-0','react'],
		plugins:["transform-runtime"]
	},
	plugins:[
		new ExtractTextPlugin('[name].css')
	]
};

示例demo git

转载于:https://my.oschina.net/sqlghost/blog/750574