【webpack学习笔记】a02-管理资源

在webpack 中，各种资源要引入，要用到module配置,比如css/图片/字体等等。

例如：

module.exports = {
    entry: './src/app.js',  //这是入口文件配置
    output: {
        //这里是出口文件配置
    },
    module: {
        rules: [
            //而这里，就是配置各种资源的地方
            {
                test: /.(jpg|png|gif)/,  
                use: ['file-loader']
            }
        ]
    }
}

一般需要用的类型也就是 css样式、图片、字体、数据，可以借助一些loader或者插件加载优化这些资源。

加载css

加载css最常用到的是css-loader和style-loader，如果需要单独分离出css文件webpack4以前可以用ExtractTextWebpackPlugin,webpack4则需要换成MiniCssExtractPlugin插件

• css-loader的作用是解析以.css结尾的文件,让它在就算是在js中引入也能够使用。官方的说法是：

css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们。

• style-loader是引用资源的loader，它会将css引入到head标签中生成一个<style>

示例流程：

安装：

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

webpack.config.js

module.exports = {
    entry: './src/app.js',  //这是入口文件配置
    output: {
        //这里是出口文件配置
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

图片&&字体

图片和字体都可以用file-loader或url-loader;

• file-loader则是可以
• url-loader的用法和file-loader差不多，准确的说应该它已经包含了file-loader。它们俩的主要区别就是：url-loader在文件大小（byte）小于指定限制的时候，可以返回一个DataURL.