webpack--第三方loader

1、配置处理css样式表的第三方loader

　　webpack默认只能打包处理js类型的文件，无法处理非js类型的文件；要想处理*.css文件，需要手动安装一下合适的第三方loader加载器：

npm i style-loader css-loader -D

　　修改webpack.config.js

var path = require('path');

// 通过node的模块操作，向外暴露一个配置对象

module.exports = {

    entry: path.join(__dirname, './src/main.js'), // 入口，表示要使用webpack打包哪个文件

    output: {   // 出口

        path: path.join(__dirname, './dist'),

        filename: 'bundle.js'

    },

    module: {  // 用于配置所有第三方模块加载器

        rules: [  // 所有第三方模块的匹配规则

            {

                test:/\.css$/,

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

            }

        ]

    }

};

　　然后，可以在main.js导入.css文件，main.js内容：

// 这是项目的入口js文件

// 导入jquery

//这是ES6中导入模块的语法

import $ from 'jquery';

import './css/common.css';

$(function() {

    $('li:odd').css('backgroundColor','yellow');

    $('li:even').css('backgroundColor','#eee');

});

　　common.css内容：

.blue {

    background-color: blue;

}

　　然后，执行webpack命令，重新生成bundle.js。

2、webpack中url-loader的使用：处理css文件中引入的url地址

　　安装第三方loader加载器：

npm i url-loader file-loader -D

　　修改webpack.config.js

var path = require('path');

// 通过node的模块操作，向外暴露一个配置对象

module.exports = {

    entry: path.join(__dirname, './src/main.js'), // 入口，表示要使用webpack打包哪个文件

    output: {   // 出口

        path: path.join(__dirname, './dist'),

        filename: 'bundle.js'

    },

    module: {  //用于配置所有第三方模块加载器

        rules: [  //所有第三方模块的匹配规则

            {

                test:/\.css$/,

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

            },

            {

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

                use: ['url-loader']

                // limit单位byte，如果图片大于等于limit给定值，则不会被转为base64格式字符串

                // name=[name].[ext]:打包的图片原名相同

                // use: ['url-loader?limit=1000&name=[name].[ext]']



            }

        ]

    }

};

　　common.css内容：

.blue {

    background-color: blue;

}

div.img {

    width: 200px;

    height: 200px;

    background: url('../images/a.jpg');

    background-size: cover;

}

　　index.html

<!DOCTYPE html>

<html>

<head>

    <title>标题</title>

    <meta charset="utf-8">

    <script type="text/javascript" src="../dist/bundle.js"></script>

</head>

<body>

    <h3 class="blue">h3标签内的文本</h3>

    <ul>

        <li>这是一个li标签</li>

        <li>这是一个li标签</li>

        <li>这是一个li标签</li>

        <li>这是一个li标签</li>

        <li>这是一个li标签</li>

    </ul>

    <div class="img"></div>

</body>

</html>

巴特西

webpack--第三方loader

最新文章

热门文章