Home > Developer > Web Develop
1.1 Creating a Lib Directory
CD E:\ReactLib
1.2 Installing the Global Webpack package
NPM Install Webpack-g
1.3 Create a new Package.json dependency management file
NPM Init
1.4 Installing the Webpack dependency package
NPM Install Webpack--save-dev
2. Basic Introduction to WebpackWebpack main structure Three: Ingress file configuration (entry), ingress file output configuration (output), loader configuration (module), other configuration (resolve)
2.1 Portal File Configuration
Entry: {
Index: './src/main.js '
},
2.2 Ingress file Output configuration
Configure where files are stored after compilation is successful
Output: {
Path: ' Dist/js ',//folder where the files are compiled
FileName: ' [name].js '//name of the compiled file according to the portal file name, compiled file or main.js
},
2.3 Loader Configuration
Module: {
The most critical piece of configuration, which tells Webpack what loader to use for each type of file to handle
Loaders: [
{test:/\.css$/, Loader: ' Style-loader!css-loader '},
{test:/\.js$/, Loader: ' Jsx-loader?harmony '},
{test:/\.scss$/, Loader: ' Style!css!sass?sourcemap '},
{test:/\. (png|jpg) $/, loader: ' url-loader?limit=8192 '}
]
},
2.4 Other configurations
Resolve: {
Automatic extension of the file suffix means that we can omit the suffix name from the Require module
Extensions: [', '. js ', '. json ', '. Scss ']
},
2.5 first refer to the directory structure in the example
Build holds compiled files, SRC holds react code folders, components store React component folders, Node_modules store installed dependencies
3. React Installation:NPM Install--save-dev react react-dom
NPM Install--save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
NPM Install--save-dev style-loader css-loader sass-loader url-loader
NPM Install--save-dev Webpack-dev-server
Automatically refreshes the modified results, configures the webpack-dev-server in Webpack.config.js,
Here we need to modify the path of the next entry, add a webpack/hot/dev-server to it, and the text will mention
4. File contents4.1 Package.json Configuration
{
"Name": "Redux",
"Version": "1.0.0",
"description": "",
"Main": "Index.js",
"Dependencies": {
"React": "^15.6.1",
"React-dom": "^15.6.1"
},
"Scripts": {
"Build": "Webpack",
"Start": "Webpack-dev-server--devtool eval--progress--colors--content-base Build"
},
"Author": "",
"License": "ISC",
"Devdependencies": {
"Babel-core": "^6.26.0",
"Babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"Babel-preset-react": "^6.24.1",
"Css-loader": "^0.28.5",
"Sass-loader": "^6.0.6",
"Style-loader": "^0.18.2",
"Url-loader": "^0.5.9",
"Webpack": "^3.5.5",
"Webpack-dev-server": "^2.7.1"
}
}
The configuration of the 4.2 webpack.config.js file is as follows:
var path = require (' path ');
var webpack = require (' Webpack ');
Module.exports = {
Entry: [' Webpack/hot/dev-server ', Path.resolve (__dirname, './src/main.js ')],
Output: {
Path:path.resolve (__dirname, './build '),
FileName: ' Bundle.js ',
},
Module: {
Loaders: [{
Test:/\.jsx?$/,
Exclude:/node_modules/,
Loader: ' Babel-loader ',
Query
{
Presets: [' react ']
}
}]
},
Plugins: [New Webpack. Hotmodulereplacementplugin ()]
};
4.3 main.js content is as follows:
Let React = require (' React ');
Let Reactdom = require (' react-dom ');
Let AppComponent = require ('./components/index.js ');
Reactdom.render (<appcomponent/>, document.getElementById (' content '));
4.4 Index.js content is as follows:
var React = require (' React ');
var Productbox = React.createclass ({
Render:function () {
Return (
<div classname= "Productbox" >
Hello world!
</div>
);
}
});
Module.exports = Productbox;
4.5 index.html content is as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>react test</title>
<body>
<div id= "Content" ></div>
<script src= "Http://localhost:8080/webpack-dev-server.js" ></script>
<script src= "./bundle.js" ></script>
</body>
5. Compile and startAfter the above file is written and put into the corresponding folder run the command NPM running build, execute NPM run start run service, after successful browser access address location:8080
Note: Node_modules can be obtained from E:\REACTLIB, code engineering can be placed in any directory, react installation depends on Nodejs, the first to ensure the success of Nodejs installation.
React&webpack Environment Installation
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
