webpack笔记二管理资源

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

加载CSS

为了在JavaScript模块中import一个CSS文件，需要安装style-loader和css-loader：

npm install --save-dev style-loader css-loader

webpack.config.js

const path = require('path');

module.exports = {

    entry: './src/index.js',

    output: {

        filename: 'bundle.js',

        path: path.resolve(__dirname, 'dist')

    },

    module: {

        rules: [

            {

                test: /\.css$/,

                use: ['style-loader', 'css-loader']

            }

        ]

    }

};

在src目录下新建style.css文件，并增加样式。

然后在src/index.js中引入样式文件：

import _ from 'lodash';

import './style.css';

function component() {

    let element = document.createElement('div');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    element.classList.add('hello');

    return element;

}

document.body.appendChild(component());

最后执行npm run build后查看页面可以看到对应的效果。

加载图像

使用file-loader。

npm install --save-dev file-loader

webpack.config.js

...

module.exports = {

    ...

    module: {

        rules: [

            ...

            {

                test: /\.(png|svg|jpg|gif)$/,

                use: ['file-loader']

            }

        ]

    }

};

src/index.js

import _ from 'lodash';

import './style.css';

import Icon from './icon.png';

function component() {

    let element = document.createElement('div');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    element.classList.add('hello');

    const myIcon = new Image();

    myIcon.src = Icon;

    element.appendChild(myIcon);

    return element;

}

document.body.appendChild(component());

加载fonts字体

file-loader以及url-loader可以接收并加载任何文件，然后将其输出到构建目录。

webpack.config.js

module.exports = {

    ...

    module: {

        rules: [

            ...

            {

                test: /\.(woff|woff2|eot|ttf|otf)$/,

                use: ['file-loader']

            }

        ]

    }

};

在src目录下增加my-font.ttf字体文件后，样式文件：

src/style.css

@font-face {

    font-family: 'MyFont';

    src: url('./my-font.ttf');

    font-weight: 600;

    font-style: normal;

}

.hello {

    color: red;

    background: url('./icon.png');

    font-family: 'MyFont';

    font-size: 24px;

}

打包后可以看到，字体被应用：

加载数据

webpack可以加载如JSON文件，CSV、TSV和XML。

JSON文件可以直接导入，无须loader。而CSV、TSV可以使用csv-loader，XML使用xml-loader。

webpack.config.js

module.exports = {

    ...

    module: {

        rules: [

            ...

            {

                test: /\.(csv|tsv)$/,

                use: ['csv-loader']

            },

            {

                test: /\.xml$/,

                use: ['xml-loader']

            }

        ]

    }

};

src/index.js

...

import Data from './data.xml';

console.log(Data);

data.xml

<?xml version="1.0" encoding="UTF-8"?>

<note>

    <to>Mary</to>

    <from>John</from>

    <heading>Reminder</heading>

    <body>Call Cindy on Tuesday</body>

</note>

全局资源

无需依赖于含有全部资源的/assets目录，而是将资源与代码组合在一起使用。

这种配置方式会使你的代码更具备可移植性。

 |– /components

 |  |– /my-component

 |  |  |– index.jsx

 |  |  |– index.css

 |  |  |– icon.svg

 |  |  |– img.png

The end... Last updated by: Jehorn, April 24, 2019, 3:23 PM

demo源码