Webpack Configuring common Loader Loaders

There are three ways to use loader in WEBAPCK

Installation must be run before using loader: NPM install--save-dev Xxx-loader

(1) Run Webpack--module-bind Jade--module-bind ' css=style!css ' through CLI: command line

Jade,style,css can be omitted after the-loader, they respectively to. Jade using Jade-loader, to. css using Style-loader and Css-loader

(2) through Require:require (' style-loader!css-loader?module!. /style/main.css ')

For MAIN.CSS using Css-loader and Style-loader loading, the loader parsing order is from right to left

(3) by configuring the Webpack.config.js:

Insert the Modules property in Webpack.config.js, (1) The rules contain an array of objects, each object {Test,use}test corresponds to a regular expression, and the use contains multiple required loader, such as requiring only one loader to save Format: Loader: ' Xxx-loader '

Modules: {    rules: [        {
　　　　  /\.css/, use         : [            ' Style-loader '},            {               ' css-loader ',               options: {                   true                     }             }           ]    },
{//Second loader},
{//Third loader}
]      }

1. Templates:

(1) Html-loader: The HTML file is exported and compiled into a string, which can be used for JS recognition of one of the modules

(2) Pug-loader: Load Pug Template

(3) Jade-loader: Loading the Jade template (the predecessor of Pug, renamed as Pug due to the trademark issue)

(4) Ejs-loader: Load Ejs Template

(5) Handlebars-loader: Transfer the handlebars template to HTML

2. Style:

(1) Css-loader: Parsing code in CSS files

(2) Style-loader: Export CSS modules as styles into the DOM

(3) Less-loader: Loading and escaping less files

(4) Sass-loader: Loading and escaping sass/scss files

(5) Postcss-loader: Loading and escaping css/sss files using Postcss

3. Script Conversion Compilation:

(1) Script-loader: The JavaScript file is executed once in the global context and does not need to be parsed

(2) Babel-loader: After loading the es6+ code, use Babel to escape to ES5 after the browser can parse

(3) Typescript-loader: Load typescript script file

(4) Coffee-loader: Load coffeescript script file

4.JSON Loading:

(1) Json-loader: Load JSON file (included by default)

(2) Json5-loader: Loading and escaping JSON5 files

5.Files file

(1) Raw-loader: Loading file original content (Utf-8 format)

(2) Url-loader: Most used to load image resources, more than the file size display returns the data URL

(3) File-loader: Send the file to the output folder and return the URL (relative path)

(4) Jshint-loader: Check code format error

6. Load Frame:

(1) Vue-loader: Loading and escaping Vue components

(2) Angualr2-template--loader: Loading and escaping angular components

(3) React-hot-loader: Dynamically refreshes and escapes the modified portion of the react component, which is based on the Webpack-dev-server plug-in and is then referenced in Webpack.config.js react-hot-loader

Webpack Configuring common Loader Loaders