一、安装 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')
]
};