Webpack use four

The famous loaders debut!

LoadersIs webpack one of the most exciting features offered. Through the use of different loader , webpack have the ability to invoke external scripts or tools to achieve the processing of different formats of files, such as the analysis of conversion scss to CSS, or the next generation of JS file (ES6,ES7) into a modern browser-compatible JS file, for the development of react, The appropriate loaders can convert the Jsx file used in react to a JS file.

Loaders needs to be installed separately and needs to be webpack.config.js modules configured under the keywords in, Loaders's configuration includes the following:

• test: a regular expression that matches the extension name of the file processed by the loaders (must)
• loader: Name of loader (required)
• include/exclude: Manually add files (folders) that must be processed or block files (folders) that you do not need to process (optional);
• query: Provides additional setup options for loaders (optional)

Before configuring loader, however, we put Greeter.js the greeting message in a separate JSON file, and through the appropriate configuration allows the Greeter.js value of the JSON file to be read, the modified code of each file is as follows:

Create a JSON file with greeting information in the app folder (named config.json )

{  "Greettext": "Hi there and Greetings from json!"}

Greeter.js after the update

var config = require ('./config.json '); module.exports = function () {  var greet = document.createelement (' div ');  Greet.textcontent = Config.greettext;  return greet;};

Note Because webpack3.*/webpack2.* already has a built-in JSON file, there is no need to add the json-loader required by webpack1.*. Before we look at how to use loader, let's see what Babel is.

Babel

Babel is actually a platform for compiling JavaScript, and its strength is that it can be compiled to help you achieve the following:

• Use the next generation of JavaScript code (ES6,ES7 ... ), even though these standards are not currently fully supported by the current browser;
• Using JavaScript-based languages such as React's jsx;

Installation and Configuration of Babel

Babel is actually a few modular package, its core function is in babel-core the NPM package called, Webpack can combine their different packages to use, for each function or extension you need, you need to install a separate package (most of the parsing Es6 babel-preset-es2015 Package and parse the JSX babel-preset-react package).

Let's go first. Install these dependent packages at once

NPM installs multiple dependent modules at once, separated by spaces between the modules npm install--save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

The webpack methods for configuring Babel in are as follows:

Module.exports = {    entry: __dirname + "/app/main.js",//The only portal file output that has been mentioned several times    : {        path: __dirname + "/public",/ /packed file storage place        filename: "bundle.js"//package output file filename    },    devtool: ' Eval-source-map ',    devserver: {        Contentbase: "./public",//the directory where the local server loads the page        historyapifallback:true,//not jump        inline:true//real-time Refresh    },    module: {        rules: [            {                test:/(\.jsx|\.js) $/, use                : {                    loader: "Babel-loader",                    Options: {                        presets: [                            "es2015", "React"                        ]                    }                },                exclude:/node_modules/            }        ]    }};

Now your webpack configuration has allowed you to use ES6 and JSX syntax. Continue to test with the above example, but this time we will use React, remember to install React and React-dom first

NPM Install--save react react-dom

Next we use the ES6 syntax to update Greeter.js and return a react component

//greeter,jsimport React, {Component} from ' React ' import config from './config.json '; class Greeter extends Component {  render () {    return (      <Div>        {config.greettext}       </div>    );}  } Export default Greeter

Modify the main.js following to define and render the Greeter module using the ES6 module

//Main.jsimport React from ' React ', import {render} from ' React-dom ', import Greeter from './greeter '; render ( <  />, document.getElementById (' root ');

Re-use npm start packaging, if the previous open local server is not closed, you should be able to localhost:8080 see the same content as before, which indicates react and es6 is properly packaged.

Configuration of the Babel

Babel can actually be configured completely in webpack.config.js , but given that Babel has a lot of configuration options, configuration in a single webpack.config.js file tends to make the file too complex, so some developers support putting Babel configuration options in a separate name. BABELRC "in the configuration file. Our current Babel configuration is not complicated, but we'll add something later, so now we're going to extract the relevant parts and configure them in two configuration files (Webpack will automatically invoke .babelrc the Babel configuration option) as follows:

Module.exports = {    entry: __dirname + "/app/main.js",//The only portal file output that has been mentioned several times    : {        path: __dirname + "/public",/ /packed file storage place        filename: "bundle.js"//package output file filename    },    devtool: ' Eval-source-map ',    devserver: {        Contentbase: "./public",//the directory where the local server loads the page        historyapifallback:true,//not jump        inline:true//real-time Refresh    },    module: {        rules: [            {                test:/(\.jsx|\.js) $/, use                : {                    loader: "Babel-loader"                },                exclude:/node_modules/            }        ]    };

. babelrc{  "presets": ["React", "es2015"]} Note: Under window is unable to directly build. babelrc file, you can enter the file root directory by cmd, type null>. BABELRC, then enter to build success

So far, we've learned that for modules, Webpack can provide very powerful processing capabilities, and those are modules.

Webpack use four