一、初始化项目
- 新建文件夹,文件名firstreact 文件夹称号不要用react,node这类关键字,背面运用插件时会发作毛病。
init项目环境,项目信息可默许或自行修正
mkdir firstreact cd firstreact npm init
二、装置webpack
- 新建gitignore文件,用于疏忽装置的包文件,文件内容: node_modules
装置webpack, 注重:我此处装置的webpack版本是4.28.4,webpack4和webpack2, webpack3的一些设置差别,详细参考webpack文档webpack中文文档
npm i --save-dev webpack
三、设置webpack环境
- 新建文件夹,文件名:src
src目次下新建文件hello.js,文件内容:
module.exports = function () { var element = document.createElement('h1'); element.innerHTML = 'Hello React'; return element; };
src目次下新建文件index.js,文件内容:
var hello = require('./hello.js'); document.body.appendChild(hello());
新建文件webpack.config.js,一个最基本的webpack设置以下:
const webpack = require('webpack'); const path = require('path'); var config = { entry: [ './src/index.js' ], // 打包进口文件 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } // 打包输出文件 }; module.exports = config;
实行webpack。实行完成后,根目次下会新增一个dist文件夹,文件夹下是打包出来的js文件bundle.js
webpack
装置html-webpack-plugin,该插件将为你天生一个 HTML5 文件, 个中包含运用 script 标签的 body 中的一切 webpack 包。
npm i --save-dev html-webpack-plugin
html-webpack-plugin设置,webpack.config.js内容以下
const webpack = require('webpack'); const path = require('path'); const HtmlwebpackPlugin = require('html-webpack-plugin'); var config = { entry: [ './src/index.js' ], // 打包进口文件 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' },// 打包输出文件 plugins: [ new HtmlwebpackPlugin({ title: 'Hello React', }) ] }; module.exports = config;
再次实行webpack,此时dist目次下天生了一个新文件index.html
webpack
装置webpack-dev-server和webpack-cli,供应一个简朴的 web 效劳器,而且可以及时从新加载。
npm install --save-dev webpack-dev-server webpack-cli
修正webpack.config
const webpack = require('webpack'); const path = require('path'); const HtmlwebpackPlugin = require('html-webpack-plugin'); var config = { entry: [ 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:3000', './src/index.js' ], // 进口文件 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, // 打包输出文件 plugins: [ new HtmlwebpackPlugin({ title: 'Hello React' }), ] }; module.exports = config;
设置webpack启动的快体式格局,此处webpack4在启动效劳是请求设置mode,示知 webpack 运用响应形式的内置优化。未设置会报一个正告。mode选项支撑“development”“production”“none”,详细信息请阅文档 修正package.json文件:
············ "scripts": { "start": "webpack-dev-server --mode=development --port 3000 --hot", "build": "webpack --mode=production" } ···········
启动效劳,效劳启动后翻开浏览器接见http://localhost:3000/
npm run dev
三、优化开辟环境
css编译和js编译。如今开辟时平常css都邑运用扩大css语法,如less或sass,这时候就须要在项目中装置css编译插件。此处以less为例。es6和es7语法也须要babel编译。
const webpack = require('webpack'); const path = require('path'); const HtmlwebpackPlugin = require('html-webpack-plugin'); var config = { entry: [ 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:3000', './src/index.js' ], // 进口文件 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, // 打包输出文件 module: { rules: [ { test: /\.less$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader' } ] }, { test: /\.js$/, exclude: /node_modules/, use: [ { loader: 'babel-loader' } ] } ] }, plugins: [ new HtmlwebpackPlugin({ title: 'Hello React' }), ]
装置:
npm i --save-dev less css-loader style-loader less-loader npm i --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
修正webpack.config.js
const webpack = require('webpack'); const path = require('path'); const HtmlwebpackPlugin = require('html-webpack-plugin'); var config = { entry: [ 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:3000', './src/index.js' ], // 进口文件 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, // 打包输出文件 module: { rules: [ { test: /\.less$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader' } ] }, { test: /\.js$/, exclude: /node_modules/, use: [ { loader: 'babel-loader' } ] } ] }, plugins: [ new HtmlwebpackPlugin({ title: 'Hello React' }), ] }; module.exports = config;
根目次下新建.babelrc文件,设置文件内容以下
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ] }
在src目次下新建文件index.less,文件内容以下
body{ h1{ color: green; } }
修正src目次下的index.js文件:
import hello from './hello.js'; import './index.less'; document.body.appendChild(hello());
再次启动效劳
npm run start
目前为止完成了一个最基本的项目构造,背面须要运用其他框架的话再此基本上修正。在这过程当中因各个插件东西的版本差别可能会发作差别毛病,碰到毛病时,请查询相干文档。
四、在项目中运用React
装置react。
npm i --save-dev react react-dom
修正src目次下index.js,文件内容以下:
import React from 'react'; import ReactDOM from 'react-dom'; import './index.less'; class APP extends React.Component { render() { return (<h1>Hello React</h1>) } } ReactDOM.render(<APP/>, document.getElementById('content'));
在src目次下新建index.html,在html增添挂载节点content。 文件内容以下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="content"></div> </body> </html>
- 对应修正webpack.config.js文件,为htmlWebpackPlugin修正template
············ plugins: [ new HtmlwebpackPlugin({ title: 'Hello React', template: './src/index.html' }), ] ············
目次构造为:
│ .babelrc
│ .gitignore
│ package.json
│ webpack.config.js
│
└─src
hello.js
index.html
index.js
index.less