webpack学习_资源管理(loader)

webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件

引入资源步骤

Step1:安装你需要的loader 

Step2:在 module配置中(module中的rules)配置

Step3:import引入你的具体资源文件

Step4:执行命令

下面省略安装css-loader style-loader  file-loader 等过程,反别在src新建了style.css文件,字体文件,图片以及data.xml,里面具体编写了需要引入的代码(详细代码忽略)

 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

在webpack.config.js配置module(着重看module新添加的部分)

const path = require('path')

module.exports ={
    entry:'./src/index.js',
    //生成一个新的文件在dist文件夹下
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    module:{
        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'
                ]
            }
          ]
    }
}

在src.index.js引用加载的具体资源

import _ from 'lodash'
import './style.css'
import Icon from './icon.png'
import Data from './data.xml'
function component() {
    var element = document.createElement('div');

    // lodash 是由当前 script 脚本 import 导入进来的
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    // 添加样式
    element.classList.add('hello');

    // 添加图像
    var myIcon = new Image()
    myIcon.src = Icon
    element.appendChild(myIcon)

    console.log(Data);

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