webpack 认识

webpack功能

打包：将不同类型资源按模块处理进行打包
静态：打包后最终产生静态资源
模块：webpack 支持不同规范的模块化开发

webpack的配置

我们可以通过 webpack.config.js 这个配置文件来对webpack 进行打包配置

const path = require('path')
module.exports = {
    entry:'./src/index.js', // entry:打包入口
    output:{ 
        filename:'main.js',
        path:path.join(__dirname,'dist')  // output 的path必须为绝对路径
    }
}

webpack 依赖图

当我们打包的文件依赖另外一个文件的时候，webpack 会将文件视为直接存在的依赖关系，
在打包的时候会根据配置文件的入口开始，然后递归构建 依赖关系图，这个依赖图包含 应用程序中所需要的每一个模块， 然后把所以模块打包成少量的bundle

webpack 的loader

为什么需要loader

webpack 不仅可以打包js文件，还可以打包 图片、css、字体等其他类型的资源，而支持打包其他资源的特性，来源于loader机制

import './css/index.css'  // js文件无法识别 css

这个时候我们就需要安装对应处理css 的loader包

安装
yarn add css-loader --dev

使用loader

行内使用

import 'css-loader!./css/index.css'

配置使用(推荐)

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.join(__dirname, 'dist')
    },
    module: {  // module 模块的配置
        rules: [ // rules 配置规则，数组里的每一项都是一个配置规则
          { 
            test: /\.css$/,  // test: 匹配我们需要处理的文件类型，一般是一个正则表达式
            loader: 'css-loader' // 我们要使用的loader
        }
       ]
    }
}