1、npm-init
生成package.json文件
2、安装项目依赖
npm intsall --save-dev react react-dom webpack webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
npm install --save-dev css-loader style-loader
npm install --save-dev postcss-loader autoprefixer
npm install --save-dev url-loader
npm install --save-dev react-transform-hmr babel-plugin-react-transform react-hot-loader/babel
npm install --save-dev html-webpack-html
3、webpack.config.js
const webpack=require("webpack");
const htmlWebpackPlugin=require("html-webpack-plugin");
module.exports={
entry:"./src/main",
output:{
path:__dirname+"/build",
filename:"bundle.js"
},
devtool:"eval-source-map",
mode:"development",
devServer:{
contentBase:"./public",
port:"8080",
inline:true,
historyApiFallback:true,
hot:true
},
module:{
rules:[{
test:/(\.jsx|\.js)$/,
use:{
loader:"babel-loader",
},
exclude:/node-modules/
},{
test:/\.css$/,
use:[
{
loader:"style-loader",
},
{
loader:"css-loader",
options:{
modules:true,
localIdentName:'[name]__[local]--[hash:base64:5]'
}
},
{
loader:"postcss-loader"
}
]
},{
test:/\.(png|jpg)$/,
use:[{
loader:"url-loader",
options:{
limit:8192
}
}]
}
]
},
plugins:[
new webpack.BannerPlugin("版权所有,翻版必究"),
new htmlWebpackPlugin({
template:__dirname+"/src/index.tmpl.html"
}),
new webpack.HotModuleReplacementPlugin()
]
}
具体参考:learnReact
参考链接:
入门Webpack,看这篇就够了
阮一峰 webpack-demos
从零开始搭建一个react项目