Home > Developer > Web Develop
Read n more blog, log, while confused while groping. This document documents the process. I was afraid I'd forgotten ... and fixed the blog Park home page recommended that the log encountered in the bug
1, webstorm a new blank project, such as Webpack_demo
2, because to use react and ES6 syntax, adjust webstorm-settings-language-javascript-jsx, OK. This file will not be an error.
3. New app (store entry file, component component), static (store packaged file), Webpack (store Webpack profile) three folders
4, in the Webpack_demo root directory, open cmd or terminal, input NPM init, all the way to enter
5. After completion, continue to enter NPM install WEBPACK-G. Complete the configuration of the Webpack
6. Create a new main.js in the app; Create a new configuration file in Webpack webpack.config.js; Create a new index.html in static; Create a new JS directory in static
7. Write the following on the index page
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>Webpack_demo</title></Head><Body><Divclass= "Content"></Div><Scriptsrc= "./js/app.js"type= "Text/javascript"CharSet= "Utf-8"></Script></Body></HTML>View Code
8, Configuration Webpack.config.js
var path = require ("path"= { entry:{ /// Portal file "app":p Ath.join (__ DirName, ". /app/main.js ") //app corresponding to the generated filename }, output:{ path:path.join (__dirname, ".. /static/js/"), filename:" [name].js " // here [name] is the name that represents the corresponding entry object, Then the resulting post-stamp is. js }}9. Write something in main.js, such as alert
10. Run in cmd
View CodeWebpack--config./webpack/webpack.config.js
11, after successful access to index.html, did not successfully repeat the above operation
12, each compilation is very annoying, you can add the corresponding configuration in Package.json, the code is as follows
{ "name": "Web_pack", "version": "1.0.0", "description": "", "Main": "Index.js", "Scripts": { "test": "Echo \" Error:no Test specified\ "&& Exit 1 ", // Add a Build value is the package used by the command } ," author ":" ", "license": "ISC", "dependencies": { "webpack": "^3.0.0" }} 13. Run the NPM run build again
14, install the configuration webpack-dev-server, realize the hot update.
1. Perform NPM i webpack-dev-server--save-dev in cmd
2. Modify the scripts in Package.json
View Code"Test": "Node_modules\.bin\webpack-dev-server--config./webpack/webpack.config.js--port 8089--open",
3, the index page JS, using absolute path, such as Http://localhost:8089/app.js
4. Execute NPM Run test in cmd, can open a local server, automatically refresh the page after each code change
15. Continue to install react, perform NPM i babel babel-core babel-loader babel-preset-es2015 babel-preset-react react react-dom--save in cmd
16, in the main.js casually write some react code, such as Hello World
17. Add Babel-loader in Webpack.config.js to parse Jsx and ES6
var path = require ("path"= { entry:{ "app":p Ath.join (__dirname, "... /app/main.js ") }, output:{ path:path.join (__dirname,". /static/js/"), filename:" [Name].js " }, module:{ loaders:[ { test: /\. (JS|JSX) $/, loader:"Babel-loader", exclude:/node_module/, query:{ presets:["React", "es2015"]}}]} }18, this time if the above are correct, the browser will automatically refresh the HelloWorld
19. Style-loader and Css-loader processing styles can be downloaded again
Building projects using Webpack and react
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
