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())

巴特西

webpack学习_资源管理(loader)

最新文章

热门文章