webpack learning _ resource management (loader)

One of the most outstanding features webpack that, in addition to JavaScript, but also through loader  introducing any other type of file

The introduction of resource step

Step1: You need to install the loader 

Step2: In the module configuration (the rules in the module) configuration

Step3: import introducing your specific resource files

Step4: Run

The following are omitted install css-loader style-loader file-loader and other processes, not anti-src built in style.css files, font files, images, and data.xml, which specifically written the code (ignore the detailed code) need to be introduced

 webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
-   |- data.xml
-   |- my-font.woff
-   |- my-font.woff2
-   |- icon.png
-   |- style.css
    |- index.js
  |- /node_modules

In webpack.config.js configuration module (see section module focuses on newly added)

the require path = const ( 'path' ) 

module.exports = { 
    entry: './src/index.js' ,
     // create a new file in the folder dist 
    Output: { 
        filename: 'bundle.js' , 
        path : path.resolve (__ dirname, 'dist' ) 
    }, 
    Module1: { 
        the rules: [ 
            { 
              Test: /\.css$/ , 
              use: [
                    'style-Loader' ,
                  'CSS-Loader' , 
              ] 
            }, 
            { 
                Test:/\.(png|svg|jpg|gif)$/,
                use:[
                    'file-loader'
                ]
            },
            {
                 test: /\.(woff|woff2|eot|ttf|otf)$/,
                 use: [
                   'file-loader'
                 ]
            },
            {
                test:'/\.(csv|tsv)$/',
                use:[
                    'csv-loader'
                ]
            },
            {
                test:/\.xml$/,
                use:[
                    'xml-loader'
                ]
            }
          ]
    }
}

In specific reference resource src.index.js loaded

_ from Import 'lodash' 
Import './style.css' 
Import from Icon './icon.png' 
Import from the Data './data.xml'
 function Component () {
     var Element = document.createElement ( 'div' ) ; 

    // lodash import a script is introduced by the current coming 
    element.innerHTML _.join = ([ 'the Hello', 'WebPACK'], '' );
     // add style 
    element.classList.add ( 'Hello' ); 

    // Add an image 
    var myIcon = new new image () 
    myIcon.src = Icon 
    element.appendChild (myIcon) 

    the console.log (the Data);
    

    return element;
  }
document.body.appendChild(component())