Home > Developer > Web Develop
New directory:
Demo (folder)
--views (folder)
--demo.html
--app (folder)
--components (folder)
--demo.jsx
--js (folder)
--demo_1.js
--demo_2.js
--css (folder)
--demo.css
--main.js ( entrance file )
Edit content:
1. The contents of demo.html are as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>React using--webpack</title></Head><Body> <DivID= "Demo"></Div> <!--The JS file introduced here is to put all JS files after packaging - <Scripttype= "Text/javascript"src= "Bundle.js"></Script></Body></HTML>
2. The contents of DEMO.JSX are as follows:
//the writing of ES6Import React from ' React ';//introduction of ReactImport styles from '. /css/demo.css ';//Import the styles of the corresponding CSS//Create a Component class: First letter must be capitalizedClass Demo extends React.component {render () {return ( //react inside the class name must be used ClassName because class is the key word //avoid global contamination by using Cssmodule to add class names<div Classname={styles.demo}>hello world!</div> ) }}//Exporting ComponentsExportdefaultDemo
3. The contents of Main.js are as follows:
//introduction of ReactImport React from ' React ';//introduction of React-domImport reactdom from ' React-dom ';//introduce DEMO.JSX This component, the component referenced after import must be capitalizedImport Demo from './components/demo.jsx ';//refer to the two modules of Demo_1 and Demo_2varDemo_1 = require ('./js/demo_1.js '));varDemo_2 = require ('./js/demo_2.js '));//reconstructs the Dom tree, finds the demo element by ID, and displays the demo componentReactdom.render (<demo/>, document.getElementById (' Demo '));
4. The contents of DEMO.CSS are as follows:
. Demo { color:red;}5. The contents of Demo_1.js are as follows:
Console.log ("You see, I demo_1 was packaged to carry out yo ~ ~ ~");6. The contents of Demo_2.js are as follows:
Console.log ("You see, I demo_2 was packaged to carry out yo ~ ~ ~");Using Webpack:
1.npm install -g webpack //全局安装
2.npm install --save-dev webpack //安装到你的项目目录
3.NPM init//Automatically create Package.json file for you
4. NPM Install--save-dev webpack//Installation Webpack dependent package
5, the root directory blind new webpack configuration file Webpack.config.js, the content is:
Module.exports ={devtool:"Eval-source-map",//makes compiled code more readable and easier to debugentry: __dirname+ "/public/main.js",//The only entry file that has been mentioned many timesoutput: {path: __dirname+ "/views",//where files are stored after they are packagedFileName: "Bundle.js"//filename of the output file after packaging //equivalent to packaging all of your JS files into a JS file, into a bundle.js file }, //enables Webpack to handle files of different formatsmodule: {rules: [//processing jsx or JS files{test:/(\.jsx|\.js) $/, use: {loader:"Babel-loader"}, exclude:/node_modules/ }, //working with CSS files{test:/\.css$/,//The introduction of CSS Module,webpack also provides very good support for CSS modularization.Use: [{//simply configure the CSS loader, and then you can directly pass the CSS class name to the component's code, which effectively avoids the global pollution. Loader: "Style-loader"}, {loader:"Css-loader", Options: {modules:true,//specify to enable CSS modulesLocalidentname: ' [Name]__[local]--[hash:base64:5] '//specifying the class name format for CSS } }] } ] }}
6,. BABELRC content is (Webpack will automatically call .babelrc in the Babel configuration options, convenient later Babel configuration options too many):
{ "presets": ["React", "env"]}7. Modify the Package.json file
"Scripts": { "test": "Echo \" Error:no test specified\ "&& exit 1", "start": "Webpack" // here is convenient for us to package directly via NPM Start, No comments in Package.json }8. Install the Babel dependencies:
NPM Install--save-dev babel-core babel-loader babel-preset-env babel-preset-react
9. Install ES6 and JSX supported React and React-dom:
NPM Install--save react react-dom
10, installation Webpack provides two tools to handle the style sheet, css-loader andstyle-loader
NPM Install--save-dev Style-loader css-loader
11. NPM Start and your demo.html
Summary: Webpack Packaging tool for us to provide convenient, through the Main.js file to package all the files into Bundle.js file output to the Views folder inside, reduce a lot of messy <srcipt> tag references, At the same time Webpack packaging tools There are more features, you can refer to other blogs, I here is just a simple demo, through react and Webpack learn to believe to make more demo projects.
React using--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
