鉴于安装项目遇到的问题,自己写了一个教程,希望能帮助到大家

新建一个项目并进入到新建的目录中

npm init  初始化

npm install webpack --save-dev  安装webpack

在 package.json  scripts处添加

"dev":"webpack-dev-server --env development"

新建webpack.config.js 配置文件

npm install webpack-cli -D  安装 webpack-cli 包

{/*

const path = require('path'); //node的路径模块

module.exports = {

entry: {

app: ["./main.js"] //入口文件

},

output: {

path: '/',//输出位置

filename: "bundle.js"//输入文件

}

};

*/}

创建main.js文件的入口

并写入

{/*

var el = document.getElementById('app');

el.innerHTML = 'webpack-dev-server 服务启动了';

*/}

npm run dev  运行 (默认端口号  8080)

{/*运行成功*/}

{/*开始引入 react 项目*/}

npm install react react-dom  --save-dev

{/*安装babel*/}

npm install babel-loader babel-core babel-preset-react babel-preset-latest --save-dev

{/*在main.js 写入文件*/}

{/*

import React from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render(

运行成功

,

document.getElementById('app')

);

*/}

{/*

module: {

rules: [

{

test: /\.js$/, // babel 转换为兼容性的 js

exclude: /node_modules/,

loader: 'babel-loader',    //主要添加babel支持

query: {

presets: ['react', 'latest']

}

}

]

}

*/}

{/*

重新执行命令

npm run  dev

*/}

你可能感兴趣的:(鉴于安装项目遇到的问题,自己写了一个教程,希望能帮助到大家)