Webpack----Loader

1, Loaders

Loaders is one of the most powerful features in Webpack. By invoking an external script or tool by using a different loader,webpack, you can process files in a variety of formats, such as parsing a JSON file and converting it to a JavaScript file, or putting the next generation of JS files (ES6,ES7) Converted to a modern browser can be recognized by the JS file, or for the development of react, the appropriate loaders can convert react jsx file into a JS file.

The loaders needs to be installed separately and needs to be configured under the Modules keyword under webpack.config.js. The configuration options for the install command for NPM install--save-dev json-loader,loaders include the following:

Modules configuration Options	Function description
Test	A regular expression that matches the extension name of the file processed by the loaders (must)
Loader	Name of the loader (required)
Include/exclude	Manually add files (folders) that you must work with or mask files (folders) that you do not need to process (optional)
Query	Additional setup options for loaders (optional)

Continue with the example above, put the greeting message in Greeter.js in a separate JSON file, and use the appropriate configuration to enable Greeter.js to read the value of the JSON file, the configuration method is as follows

Module.exports = {      devtool: ' Eval-source-map ',//configure Generate source Maps, select the appropriate option      entry:  __dirname + "/app/main.js ",//The only portal file output that has been mentioned several times:      {          path: __dirname +"/public ",//the place where the packaged file is stored filename          :" bundle.js "//file name of the output file after packaging      },      module: {//Add JSON loader loaders in config file          : [              {                  test:/\.json$/,                  loader: "Json-loader"              }          ]      },      devserver: {          contentbase: "./public",//directory where the local server loads the page          colors:true,// The output of the terminal is color          historyapifallback:true,//Do not jump inline:true//          real-time Refresh      }  }  

　　

2, Babel

Loaders very good, but some loaders use more complex, such as Babel.

Babel is actually a platform for compiling JavaScript, which is powerful in that it can be compiled to achieve the following:

1) The next generation of JavaScript standards (ES6,ES7), which are not currently fully supported by the current browser;

2) Use JavaScript-based languages such as React's jsx.

Babel is actually a few modular packages, the core of which is in the NPM package called Babel-core, but the Webpack integrates them together, but for each function or extension needed, Need to install a separate package (the most used is to parse the ES6 babel-preset-es2015 package and parse the JSX babel-preset-react package).

Install these dependent packages at once (NPM installs multiple dependent modules at once, separated by a space between modules):

NPM Install--save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

The methods for configuring Babel in Webpack are as follows (configured in the loaders of the Webpack.config.js module section):

Module.exports = {      devtool: ' Eval-source-map ',//config generate source Maps, select the appropriate option      entry:  __dirname + "/app/main.js ",//The only import file that has been mentioned several times      output: {          path: __dirname +"/public ",//the place where the packaged file is stored filename          :" bundle.js "//file name of the output file after packaging      },      module: {          loaders: [              {                  test:/\.json$/,                  loader: ' Json-loader '              },              {                  Test:/\.js$/,                  exclude:/node_modules/,                  loader: ' Babel ',                  query: {                      presets: [' es2015 ', ' react ']                  }              }          ]      }  }  

　　

Configuration options for Babel:

Babel can actually be configured entirely 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 A separate configuration file named ". BABELRC". Now the Babel configuration is not complicated, but then add something, so now extract the relevant parts, divided into two configuration file configuration (Webpack will automatically call. Babel configuration options in BABELRC), as follows:

Module.exports = {      devtool: ' Eval-source-map ',//config generate source Maps, select the appropriate option      entry:  __dirname + "/app/main.js ",//The only import file that has been mentioned several times      output: {          path: __dirname +"/public ",//the place where the packaged file is stored filename          :" bundle.js "//file name of the output file after packaging      },      module: {          loaders: [              {                  test:/\.json$/,                  loader: ' Json-loader '              },              {                  Test:/\.js$/,                  exclude:/node_modules/,                  loader: ' Babel '              }          ]      }}  

. BABELRC:

{      "presets": ["React", "es2015"]  }  

　　

3. Module

Webpack Advantages: All files can be processed as modules, including JavaScript code, including CSS and fonts, as well as images, which can be treated as modules through the appropriate loaders.

1) CSS

Webpack provides two tools for working with style sheets, css-loader and Style-loader, both of which work differently, and Css-loader makes it possible to use similar @import and URLs (...). method to implement require () function, style-loader all the calculated style into the page, the combination of the two can be embedded in the style sheet webpack the packaged JS file.

Install command: NPM install--save-dev style-loader css-loader

Module.exports = {      devtool: ' Eval-source-map ',//config generate source Maps, select the appropriate option      entry:  __dirname + "/app/main.js ",//The only import file that has been mentioned several times      output: {          path: __dirname +"/public ",//the place where the packaged file is stored filename          :" bundle.js "//file name of the output file after packaging      },      module: {          loaders: [              {                  test:/\.json$/,                  loader: ' Json-loader '              },              {                  Test:/\.js$/,                  exclude:/node_modules/,                  loader: ' Babel ',                  query: {                      presets: [' es2015 ', ' react '] }}              ,              {                  test:/\.css$/,                  loader: ' Style!css '              }          ]      }}  

　　

Webpack----Loader