1. 修改package.json，添加需要安裝的包
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "cross-env NODE_ENV=development webpack-dev-server --hotOnly --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-polyfill": "^6.26.0",
"babel-preset-react-app": "^3.1.1",
"clean-webpack-plugin": "^0.1.19",
"cross-env": "^5.2.0",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.8.2",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"lodash": "^4.17.10",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2"
}
}
2. 運行 npm i ，安裝。
3. 修改webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const webpack = require('webpack'); module.exports = { entry: { app: path.resolve(__dirname, './src/index.js') }, devtool: 'inline-source-map', devServer: { contentBase: './dist', hot: true }, mode: 'development', output: { filename: '[name]_[hash:8].bundle.js', path: path.resolve(__dirname, 'dist') }, plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ template: path.resolve(__dirname, './public/index.html'), // src文件 filename: 'index.html'// dist文件 }), new webpack.HotModuleReplacementPlugin() ], module: { rules: [ { test: /\.jsx?$/, loader: require.resolve('babel-loader'), exclude: /node-modules/ } ] } };
4. 在根目錄創建.eslintrc文件
{ "parser": "babel-eslint", "extends": "airbnb", "rules": { "arrow-body-style": [0], "consistent-return": [0], "generator-star-spacing": [0], "global-require": [1], "import/extensions": [0], "import/no-extraneous-dependencies": [0], "import/no-unresolved": [0], "import/prefer-default-export": [0], "jsx-a11y/no-static-element-interactions": [0], "no-bitwise": [0], "no-cond-assign": [0], "no-else-return": [0], "no-nested-ternary": [0], "no-restricted-syntax": [0], "no-use-before-define": [0], "react/forbid-prop-types": [0], "react/jsx-filename-extension": [1, { "extensions": [".js"] }], "react/jsx-no-bind": [0], "react/prefer-stateless-function": [0], "react/prop-types": [0], "require-yield": [1], "no-unused-vars": [0], "space-infix-ops": [0], "object-shorthand": [0], "quotes": 0,//[1, "single"], "jsx-quotes": 0, "prefer-const": [0], "indent": [2, 4], "react/jsx-indent": [1, 4], "curly": [1, "all"], "comma-dangle": [2, "never"], "react/jsx-indent-props": 0, "react/jsx-curly-spacing": 0, "space-in-parens": 0, "no-irregular-whitespace": 2, "no-mixed-spaces-and-tabs": [2, false], "no-underscore-dangle": 1, "key-spacing": 0, "no-param-reassign": 0, "no-lonely-if": 0, "linebreak-style": 0, "max-len": [2, 300], "class-methods-use-this": 0, "quote-props":0, "no-shadow": 0, "guard-for-in": 0, "no-labels": 0, "prefer-template": 0, "react/sort-comp": 0 }, "parserOptions": { "ecmaFeatures": { "experimentalObjectRestSpread": true } }, "env": { "browser": true, "node": true } }
5. 在根目錄創建.babelrc文件
{ "presets": [ "react-app" ] }
6. 修改index.js
import React from 'react'; import ReactDom from 'react-dom'; import { Router, Route } from 'react-router-dom'; class App extends React.Component { render() { return ( <div>Hello,React~</div> ) } } ReactDom.render( <App />, document.getElementById('app'), )
7. 在根目錄新建public文件夾，將index.html移動到該文件下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <title>react</title> </head> <body> <div id="app"></div> </body> </html>
8. 運行 npm start ，瀏覽器顯示頁面
