新建一个项目并进入到新建的目录中
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
*/}
