Grunt&webpack of the front-end Modular Development Chapter

A few months ago wrote an article about Gulp and browserify to do front-end build blog, because browserify used to do JS packaging may be a bit of trouble (especially when writing react), so here is strongly recommended a JS packaging tool-webpack. Webpack is very powerful, not only can be modular loading JS, and even jsx,css, pictures and so on. You can see Webpack hosted on GitHub's official website, I believe you can see a glimpse of Webpack's strong place. Enter Webpack official website >>

= = Here, there is some embarrassment, because the blogger's English so generally, the understanding of Webpack is not deep enough, here only to do a general explanation. Similarly, I did not find in the Webpack community about CSS Compression plug-in, so can only use grunt to do about the CSS packaging, but grunt and Webpack does not conflict and grunt community is very mature, as long as you can think of the plug-in in the grunt the official is a drop ( Does not mean I have used ~).

Okay, get to the chase. Because we use the webpack, so we still use the react framework to match this demonstration, of course, our CSS is to use the grunt to merge compression. Before we write the code, we need to install Npm,grunt and Webpack. Here I will not say more, you can go to NPM's official website, the above can find specific installation details. NPM Community >>

The first step is to create a working directory, 2016-3-5. We then use NPM init (or CNPM init) to initialize the project.

The second step is to start writing JS and CSS files. Since we are using the REACT framework, we use the JSX syntax to write, and of course the file must be saved as a. jsx format, we directly quote Facebook official to give a small demo (well, the blogger is too lazy to write ...), Save As LIKEBUTTON.JSX, and then write two CSS files to simulate merging and compressing, respectively, as Likebutton1.css and Likebutton2.css. The code is as follows:

LIKEBUTTON.JSX:

1 varReact = require (' React '));2 varReactdom = require (' React-dom '));3 4 varLinkButton =React.createclass ({5Getinitialstate:function() {6         return {7Liked:false8         };9     },TenHandleclick:function(event) { One          This. SetState ({ ALiked:! This. state.liked -         }); -     }, theRenderfunction() { -         varText = This. state.liked? ' Like ': ' haven\ ' t liked '; -         return( -<p onclick={ This.handleclick}> +You{text} This. Click to toggle. -</p> +         ); A     } at }); -  -Reactdom.render (<linkbutton/>,document.body);

View Code

LIKEBUTTON1.CSS:

1 * {2    margin: 0px;  3    padding: 0px;  4 }

View Code

LIKEBUTTON2.CSS:

1 P {2    width: 500px;  3    background-color: #000;  4    color: #fff5 }

View Code

Haha, in order to demonstrate grunt, I also quite spell write two so short CSS. Next we begin to configure grunt and webpack tasks.

Grunt's task is to write a file named Gruntfile.js in the root directory, and Webpack needs to write a file named Webpack.config.js in the root directory. The code is listed first, and then the details are explained.

Gruntfile.js:

1 module.exports = function (grunt){2 3 Grunt.initconfig ({4 Pkg:Grunt.file.readJSON (' Package.json '),5 cssmin: {6 options: {7 Shorthandcompacting:false,8 roundingprecision:-19},Ten Target:{ One Files: { A './likebutton.min.css ': [ - './likebutton1.css ', - './likebutton2.css ' the                     ] -} -             } -         } +     }); -  + grunt.loadnpmtasks (' grunt-contrib-cssmin '); A  at grunt.registertask (' Default ', [' cssmin ']); - }

View Code

Grunt configuration in three steps, the first step is to configure the task, namely Grunt.initconfig ({}); the second step is to load the task plug-in; the third step is to register the executable task command.

Generally the first step is to manually configure their own, Grunt has a lot of plug-ins, and today the introduction of the CSS compression is only used in the Grunt-contrib-cssmin plug-in. First See Pkg:grunt.file.readJSON (' Package.json ') this line, Sometimes we need to put some grunt task basic information in Package.json, we need to convert this file to a JS object, and then can be used to make the call in this file. The next step is a key:value form that will always appear, representing the task name: the incoming information for the task. Let's say this cssmin is Grunt's task name, and so on, I just need to enter grunt cssmin in the console when I compress the merged files.

What should be written inside the task? This is because the plug-in is very different, it is recommended that you go to GitHub or the NPM community to read the official document. Grunt-contrib-cssmin Official document >>.

The second step of the loading plug-in, only need to Grunt.loadnpmtasks (' plugin name '), remember to npm this plugin oh.

The third step of the task registration, Grunt.registertask (' Default ', [' cssmin ']). The array writes all of the methods that you built in the first step, and default takes all the methods one-click, and at the command line you just enter grunt, and all the tasks are done by themselves.

　　

Next look at our file LikeButton.min.css:

　　

Our grunt is excellent at accomplishing its task ~ haha, although only two files, but when you face n files, and performance improvement, Grunt will be a good helper for you. And the appearance of react, and make webpack this tool thoroughly bottom of the fire!

I would like to say why I use Webpack, before I use gulp+browserify to build react, but I feel really very difficult to configure, especially the front-end to more and more attention to the era of modular development, what pictures, css to do so, So Webpack will be the best choice. Nonsense not much to say, directly into the Webpack.config.js configuration!

Webpack.config.js:

1 var webpack = require (' Webpack ');2 3 module.exports ={4 entry: {5 Likebutton: './likebutton.jsx '6},7 Output:{8 Path:'./',9 filename: ' [name].js 'Ten}, One module:{ A Loaders: [ -             { - test:/\.jsx$/, the loader: ' Jsx-loader ' -} -         ] -     } + }

View Code

For the Webpack configuration, in fact, more understandable. Entry, as an entry point, uses the Key-value format to indicate a reference to this file in the Webpack task. After the output object, you need to indicate the path and the output file name filename, where [name] is the key in entry. and the loaders array in the module is the Webpack plugin we used, here is a JSX converter "Jsx-loader", we use the regular to find all the jsx end of the file to convert.

The entire webpack configuration is simple, but webpack function more than that, Bo Master also in the study, can refer to webpack on GitHub document >>.

　　

After executing the Webpack console will have some information output, this time your JSX file has been packaged as a JS file, but ... This file is really a bit large, because it contains the entire react framework, but when multiple jsx or JS packaging We can create a common JS to extract the public part.

Webpack and grunt greatly enhance the development efficiency, so here strongly recommended ~

　　

　　

Grunt&webpack of the front-end Modular Development Chapter