Home > Developer > Web Develop
Environmental preparedness: Windows7, Webstorm 2017.1.4, Nodejs 8.7.0, NPM 5.4.2
PS: When installing, we all bring the version, so even if the webpack version changes, there will be no version issue.
Initializing the Package.json file
NPM Init
NPM installs react, react-dom packages
Or
NPM i-s [email protected] [email protected]
NPM installs Webpack, WEBPACK-CLI and other packages
NPM install [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [E Mail protected] [email protected] [email protected]--save-dev
Or
NPM i-d [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [Emai L protected] [email protected] [email protected]
Folder structure
The contents of each file
Index.jsx
Import React from ' React '; class Index extends React.component { render () { return ( /c4><div> This is the homepage women modify </div> ); default Index;Index.js
Import React from ' React 'react-dom'./views/index '; Reactdom.render (<index/>, document.getElementById (' app '));Index.html
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <Metacontent= "Telephone=no"name= "Format-detection"> <title>React</title></Head><Body><DivID= "App"></Div><Scripttype=text/javascriptsrc=js/index.js></Script></Body></HTML>View Code
Base.config.js
Let config = { entry: { ' index ': './src/index.js ' }, resolve: { extensions: [" . js ",". Json ",". Jsx ",". css "], = config;Dev.config.js
Const WEBPACK = require (' Webpack ');//introduction of WebpackConst OPN = require (' OPN ');//Open BrowserConst MERGE = require (' Webpack-merge ');//webpack configuration file MergingConst PATH = require ("path"); Const Basewebpackconfig= Require ("./base.config");//Basic ConfigurationConst WEBPACKFILE = require ("./file.config");//Some path configurationsLet config=Merge (Basewebpackconfig, {/*setting up the development environment*/mode:' Development ', Output: {path:path.resolve (webpackfile.devdirectory), filename:' Js/[name].js ', Chunkfilename:"Js/[name].js", Publicpath:‘‘}, plugins: [/*set up hot updates*/ NewWebpack. Hotmodulereplacementplugin (),], module: {rules: [{test:/\. (JS|JSX) $/, use: [' Babel-loader ',], include: [Path.resolve (__dirname,".. /src ")], exclude: [Path.resolve (__dirname,".. /node_modules ") ], } ] }, /*Set API Forwarding*/Devserver: {host:' 0.0.0.0 ', Port:8080, hot:true, inline:true, ContentBase:path.resolve (webpackfile.devdirectory), Historyapifallback:true, Disablehostcheck:true, Proxy: [{context: ['/api/** ', '/u/** '], Target:' Http://127.0.0.1:8080/', Secure:false } ], /*Open the browser and open the project URL*/After () {OPN (' http://localhost: ' + This. Port); }}); Module.exports= config;View Code
File.config.js
Module.exports = { devdirectory:' static ',/* Development Directory * /prodirectory: ' dist ',/* Publish directory * /resource:' resource ',/* static Resources */};Add a script command to the Package.json file
"Dev": "Webpack-dev-server--devtool eval--progress--colors--profile--config webpack/dev.config.js"
Execute Run command last
Code Address: Https://github.com/yangbiaoit/react-webpack
Webpack4. X + react Construction
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
