Webpack Getting Started

Reference: http://www.jianshu.com/p/42e11515c10f

Installing WEBPACK:NPM install WEBPACK-G all modules

Webpack has an undeniable advantage that all files can be processed as modules, including your JavaScript code, CSS and fonts, images and so on, which can be treated as modules only through proper loaders.

Css

Webpack provides two tools for working with style sheets, css-loader and style-loader , unlike the tasks they handle, css-loader enables you to use similar @import and url(...) methods to implement require() functionality, style-loader By adding all the computed styles to the page, the two are combined so that you can embed the stylesheet in the Webpack-packaged JS file .

......

< Span class= "Apple-converted-space" > Do you remember? Webpack only a single entrance, the other modules need to import, require, URLs, etc. to the relevant location, in order for Webpack to find the "main.css" file, we import it into "Main.js", as follows

//main.jsimport React from ‘react‘;import {render} from ‘react-dom‘;import Greeter from ‘./Greeter‘;import ‘./main.css‘;//使用require导入css文件render(<Greeter />, document.getElementById(‘root‘));


Normally, CSS will be packaged in the same file as JS and will not be packaged as a separate CSS file, but the CSS can be packaged as a separate file with the appropriate configuration Webpack.
But this is just webpack css as a module, let's continue to look at a real CSS module practice.

CSS Module

Over the past few years, JavaScript has evolved very quickly through a number of new language features, better tools, and better practices, such as modularity. The module enables developers to transform complex code into small, clean, well-defined units, and based on optimization tools, dependency management and load management can be done automatically .
However, the other part of the front-end, CSS development is relatively slow, most of the style sheet is still huge and full of global class name, which makes maintenance and modification is very difficult and complex.

recently, a technology called CSS modules is intended to bring the modular idea of JS into the CSS, through the CSS module, all the class name, the animation name by default only action on the current module. Webpack from the beginning of the CSS modularity to provide support, in the CSS loader configuration, all you need to do is to "modules" to pass all the necessary places, and then you can directly pass the CSS class name into the code of the component, This is only valid for the current component, and you do not have to worry about having the same class name in different modules that might cause problems. The specific code is as follows

Plugins (Plugins)

Plug-ins (Plugins) are used to extend the functionality of Webpack, which take effect throughout the build process and perform related tasks.
Loaders and plugins are often confused, but they are really different things, so to say, loaders is used to process the source files during the package build process (jsx,scss,less. ), one process at a time, the plug-in does not directly manipulate a single file, it directly affects the entire build process.

Webpack has a lot of built-in plugins, and there are a lot of third-party plugins that allow us to do a richer function.

Ways to use plug-ins

To use a plugin, we need to install it via NPM, and then we have to add an instance of the plugin in the Plugins keyword section of the Webpack configuration (plugins is an array) to continue with the example, we have added a plugin that implements the copyright notice.

//Webpack.config.jsvarWebpack = require (' Webpack ')); Module.exports={devtool:' Eval-source-map ', entry: __dirname+ "/app/main.js", output: {...}, module: {loaders: [{test:/\.json$/, Loader: "JSON"}, {test:/\.js$/, exclude:/node_modules/, Loader: ' Babel '}, {test:/\.css$/, loader: ' Style!css?modules!postcss '}//Add postcss here]}, POSTCSS: [Require (' Autoprefixer ')], plugins: [New Webpack. Bannerplugin ("Copyright Flying Unicorns Inc.")//in this array, new one is available.], Devserver: {...}}

Through this plugin, the packaged JS file is displayed as follows

Know Webpack in how to use the plug-in, the following to recommend a few common plug-ins

Htmlwebpackplugin

The role of this plugin is based on a simple template to help you generate the final HTML5 file, which automatically refers to your packaged JS file. Each compilation inserts a different hash value in the file name.

Installation

npm install --save-dev html-webpack-plugin

Hot Module Replacement

Hot Module Replacement (HMR) is also a useful plugin in Webpack, which allows you to automatically refresh real-time preview of the modified effect after you modify the component code.
The implementation of HMR in Webpack is also simple and requires only two configurations

1. Add the HMR plugin in the webpack configuration file;
2. Add "hot" parameters to Webpack Dev server;

However, after the configuration of these, JS module is still not automatically hot loading, but also in your JS module to execute a Webpack provided API to achieve hot loading, although this API is not difficult to use, but if it is react module, With our already familiar Babel, it is more convenient to implement hot load of function.

...

Webpack Getting Started