新建项目文件夹
mkdir react -webpack
cd react -webpack
npm init //生成package.json
安装webpack
npm install -g webpack（安装过的请忽略这一步）//全局安装webpack
npm install --save-dev webpack //安装到你的项目目录
安装babel全家桶
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
安装react,react-dom
npm install --save-dev react react-dom
安装css-loader依赖
npm install --save-dev css-loader style-loader
创建react相关页面
创建一个webpack.config.js配置如下
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: path.resolve(__dirname, './src/index.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
},
devServer: {
contentBase: "./dist",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,//实时刷新
port: 8080,//设置默认监听端口，如果省略，默认为"8080"
},
module: {
rules: [
{
test: /\.json$/,
loader: "json"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',//在webpack的module部分的loaders里进行配置即可
query: {
presets: ['env','react']
}
}]
}
};
Webpack //运行生成bundle.js
npm install --save-dev webpack-dev-server
npm install webpack-cli -D
"scripts": {
"dev": "webpack-dev-server"
}
