Home > Developer > Web Develop
Prerequisite: Nodejs and NPM have been installed
#全局安装webpack Automated Building tools, functional Management projects; Webpack-dev-server is a development tool that provides hot Module replacement functionality
# Webpack Introduction: http://webpack.github.io/docs/what-is-webpack.html
Install -g webpack webpack-dev-server
#在项目文件夹路径下, Initialize the NPM project
NPM Init
#安装webpack和webpack-dev-server to the project
Install Webpack Webpack-dev-server--save-dev
#可选:
#安装css-loader, style-loader, image-loader, You can load CSS style files and pictures under JS (optional)
(webpack can also install other functions, such as code-splitting, etc.)
Install css-loader style-loader image-loader--save
#安装reactJs依赖包 (react React-dom) and Babel dependent packages (conversion jsx-js, etc.)
install --save react react-dom babel-preset-react babel-preset-es2015 babel-loader babel-core
#新建webpack. config.js to the root directory, add the following (loader optional):
Module.exports ="./index.js""bundle.js"/\.js[x]?$//node_modules/' Babel-loader?presets[]=es2015&presets[]=react '/\.css$/' style-loader!css-loader ' /\. (png|jpg) $/' url-loader?limit=8192 '}};
Add a script under #在package. JSON
"scripts": {"test": "echo \" error:no test specified\ "&& exit 1","build": "webpack", "start": "webpack-dev-server--devtool eval--progress--colors--hot","deploy": "node_env=production webpack -p "," Deploy-windows ":" SET node_env=production & Webpack-p "," Validate ":" npm ls "}#添加各个文件到根目录下
---index.js
Import React from ' React' react-dom '; Reactdom.render (--index.html
<!DOCTYPE HTML><HTMLLang= "en"><Head> <title>Index</title> <MetaCharSet= "UTF-8"> <Metaname= "viewport"content= "width=device-width, initial-scale=1"></Head><Body> <DivID= "container"> </Div> <Scripttype= "text/javascript"src= "bundle.js"></Script></Body></HTML>#运行后打开http://127.0.0.1:8080/is available
NPM startD1.1. Building a basic Reactjs project with NPM (webpack)
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
