1.执行 npm init
生成package.json文件，并将scripts中修改为：
"scripts": {
"start": "webpack --watch",
"server": "webpack-dev-server --hot --inline --history-api-fallback"
},
2.安装相应的依赖
npm install babel-cli babel-core --save-dev
npm install react react-dom --save-dev
npm install webpack webpack-dev-server webpack-cli --save-dev
npm install css-loader babel-loader@7 style-loader --save-dev
npm install babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev
3.创建配置文件webpack.config.js与.babelrc
webpack.config.js:
module.exports = {
entry: './main.js',
output: {
filename: './bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
}, {
test: /\.css$/,
exclude: /node_modules/,
loader: 'style!css'
}
]
},
devtool: 'cheap-source-map',
}
.babelrc:
{
"presets": ["es2015","react",'stage-0']
}
4.执行 npm run server
网友评论