webpack自学基础篇

webpack是一个模块打包器，将一切资源(代码资源及非代码资源)进行打包，即根据入口文件找到依赖，会形成一颗依赖树。

 

Entry

用来指定webpack的打包入口

• 单入口：entry是一个字符串

module.exports = {
    entry: './path/entry/file.js'
}

• 多入口：entry是一个对象

module.exports = {
    entry: {
        app: './src/app.js',
        home: './src/home.js'
    }
}

Output

用来指定打包的输出，即告诉webpack如何将编译后的文件输出到磁盘

• 单入口配置

module.exports = {
    output: {
        filename: 'bundle.js',
        path: __dirname + '/dist'
    }
}

• 多入口配置（通过占位符确保文件名称的唯一）

module.exports = {
    output: {
        filename: '[name].js',            
        path: __dirname + '/dist'
    }
}

Loaders

webpack开箱即用只支持JS和JSON两种文件类型，通过Loaders去支持其它文件类型并把它们转化成有效的模块，并且可以添加到依赖图中。

本身是一个函数，接受源文件作为参数，返回转换的结果。

名称	描述
babel-loader	转换ES6、ES7等JS新特性语法
css-loader	支持.css文件的加载和解析
less-loader	将less文件转换为css
ts-loader	将TS转换成JS
file-loader	进行图片、字体等的打包（富媒体）
raw-loader	将文件以字符串的形式导入
thread-loader	多进程打包JS和CSS

 

 

 

 

 

 

 

 

---

test指定匹配规则，use指定使用的loader名称

module.exports = {
    module: {
        rules: [
            { test: /\.txt$/, use: 'raw-loader'}
        ]
    }
}

Plugins

用来增强webpack的功能，通常用于打包输出文件的优化，资源管理和环境变量注入，作用于整个构建过程。

常见的Plugins有哪些？