Home > Developer > Web Develop
Package.json Add the following code
"Dependencies": {
"Babel-runtime": "^6.5.0",
"React": "^0.14.7",
"React-dom": "^0.14.7"
},
"Devdependencies": {
"Babel-core": "^6.7.4",
"Babel-loader": "^6.2.4",
"Babel-preset-es2015": "^6.6.0 "Babel-preset-react": "^6.5 .0" React0.14.7" React-dom0.14.7" Webpack1.12.14" Webpack-dev-server1.14.1 "}
And then executenpn install
Engineering
Create a new file in the project directory webpack.config.js with the following contents
/*** Created by Hammer on 2016/3/26. * Packaged files for configuration */
var webpack = require (' Webpack ');
var commonsplugin = new Webpack.optimize.CommonsChunkPlugin (' Common.js ');
var path = require (' Path ');
Console.log (__dirname);
Module.exports = {
Plug-in items
Plugins: [
Commonsplugin,
New Webpack. Noerrorsplugin ()
1],
Page Portal File Configuration
Entry: {mian: './app/main.js '},
Entry:path.resolve (__dirname,'./app/main.js '),
Ingress file Output Configuration
Output: {path: __dirname+ ' _build_ ', filename: ' [name].js '}
output:{
Path:path.resolve (__dirname,'./build '),
FileName' Build.js '
},
Module: {
Loader configuration
Loaders: [
Less files are processed into CSS by less-load and then loaded into a CSS module by Css-loader, and finally processed by the Style-loader loader.
This allows the runtime to apply the style tag to the final browser environment
{test:/\.less/, Loader:' Style-loader!css-loader!less-loader '},
. css files use Style-loader and Css-loader to handle
{test:/\.css$/, Loader:' Style-loader!css-loader '},
. js file using Jsx-loader to compile processing Jsx-loader can add? Harmony parameter enables it to support ES6 syntax
{test:/\.js$/,
Exclude:/node_modules/,
Loader' Babel ',
query:{
presets:[' Es2015 ',' React ']
}Note: es2015 is used to support ES6 syntax, react to solve the problem of render () error
},
. scss files are compiled with Style-loader, Css-loader, and Sass-loader
{test:/\.scss$/, Loader: ' Style!css!sass?sourcemap '},
//picture files are processed using Url-loader, Less than 8kb directly to Base64
{test:/\. png|jpg) $/, loader: ' url-loader?limit=8192 '}
]
},
//Other solution configurations
Resolve: {
//find the module from here to find the
//root: ' e:/github/ Flux-example/app ',//absolute path
//auto-extension file suffix means that we require module can omit the no-write suffix name
Extensions: [ span class= "comment" >//module alias definition, convenient for subsequent direct reference aliases, no need to write long address
alias: {
AppStore: js/stores/ Appstores.js ',
ActionType: ' js/actions/actiontype.js ',
Appaction: ' js/actions/appaction.js '
}
}
};
Execute the webpack command to package, the package completes will appear in the build directory Build.js file, compile successfully.
Modify a package.json file
"Scripts": {
"Build": "Webpack",
"Dev": "Webpack-dev-server --devtool eval--progress--colors--hot--content-base Build"
},
index.html files are as follows
<! DOCTYPE html>
<Htmllang="EN" >
<Head>
<meta charset= "UTF-8" >
<title>title</title
</HEAD>
<body
<div id= "content" ></DIV>
<script span class= "attribute" >src= "build.js" ></< Span class= "title" >SCRIPT>
</BODY>
</ HTML>
The port number of the service can be modifiedwebpac.config.js
Devserver: { inline: true, port: 7777},
Run npm run dev
Open http://localhost:7777 Preview in browser
1 Add an entry point to the configuration to modify the webpack.config.js file
entry:[
' Webpack/hot/dev-server ',
Path.resolve (__dirname, ' app/main.js ')
],
2 Modify inedx.html File
<body>
<div id = "app" ></div>
<script src="Http://localhost:7777/webpack-dev-server.js" ></Script >
<script src="Build.js" ></script>
This can be done by
Run npm run dev into development mode, you can quickly edit the direct preview
You may have noticed that after introducing React JS to your project, it takes too much time to re-merge your apps. In a development environment, it is ideal to compile at a rate of up to 200 to 800 milliseconds, depending on the application you are developing.
Using compressed files in the development environment
In order not to allow Webpack to traverse React JS and its dependencies, you can rewrite its behavior in development.
Modify a webpack.config.js file
var path = require (' path ');
+ var node_modules = path.resolve (__dirname, ' node_modules ');
+ var pathtoreact = path.resolve (node_modules, ' react/dist/react.min.js ');
Config = {
Entry: [' Webpack/hot/dev-server ', Path.resolve (__dirname, ' app/main.js ')],
Resolve: {
Alias: {
+ ' react ': pathtoreact
}
},
Output: {
Path:path.resolve (__dirname, ' build '),
FileName: ' bundle.js ',
},
Module: {
Loaders: [{
Test: /\.jsx?$/,
Loader: ' Babel '
}],
Noparse: [Pathtoreact]
}
};
module.exports = config;
React+webpack quickly build a Web project
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
