First let’s look at our final form: TodoMvc:

If you have some knowledge of Node.js and ES6, then you must have a newer version of Node installed on your computer. All right, let’s cut to the chase.

Todomvc-1step # webPack configuration

  1. Webpack is the most popular front-end resource modular management and packaging tool. See the official website for details.

  2. $NPM install webpack -g Now that webpack has been installed in the global environment, you can use the command line webpack -h to try. But we usually install Webpack and its dependencies in this way, as follows: # make sure package.json is present $NPM install webpack –save-dev # install react.js dependencies $NPM I react React -dom -S $NPM I react react-dom -S $NPM I react react-dom -S Finally, our package.json should look like this:

    Make sure everything in the red box is the same.

  3. Now that we have the dependencies installed, we need to set up the project directory: .├ ─ SRC ├─ Components ├─ app.js # React Component ├─ Styles ├─ main.styl # Stylus file (similar to the sass) ├ ─ ─ entry. Js # entrance js file ├ ─ ─ index. The HTML # entry page ├ ─ ─ package. The json # project description file (containing related dependent) └ ─ ─ webpack. Config. Js # Module.exports = {entry: [“./ SRC /entry.js”], output: {path: ‘./out/’, filename: “bundle.js” }, module: { loaders: [ { test: /.js[x]?$/, loader: “babel-loader?presets[]=es2015&presets[]=react”, include: /src/}, { test: /.css$/, loader: “style!css”}, { test: /.styl$/, loader: “style-loader!css-loader!stylus-loader”}, { test: /.(png|jpg)$/, loader: The ‘url? Limit =8192’}]}} configuration file packages our entry file, entry-js, and outputs it to./out/bundle.js. We simply import bundle.js in the index.html page. The webpack-usage and webpack-loader files in the/SRC directory can be viewed directly in the source code. /out/bundle.js file in our directory. Then we open the index.html file in the directory in our browser and alert(‘success’).

Well, congratulations, step one is done! React+webpack to create a todoMvc from 0 to 1 React+ WebPack builds a todoMvc from 0 to 1.