webpack基础笔记

loader

用于转化某些类型的模块

loader可以让webpack处理那些非js文件(webpack本身只能理解js)

loader可以将所有类型的文件转化为webpack能够处理的有效模块，然后利用webpack的打包能力对其进行处理。

本质上 loader将所有类型的文件，转换为应用程序的依赖图可以直接引用的模块

loader 可以 import 任何类型的模块，这是webpack特有的 功能，

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
  //对module对象定义rules 必须包含text 和 use 两个
    rules: [
    //在对某种规则的路径打包前，先使用raw-loader
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

插件plugins

插件可以用于执行范围更广的任务。

范围包括：
从打包优化和压缩，一直到重新定义环境中的变量(cross-env)

使用插件：

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

模式

选择 development production 设置mode的参数 可以启动相应模式下的webpack的内置优化

module.exports = {
  mode: 'production'//development 
};

模块解析

模块解析是指编译器在查找导入模块内容时遵循的流程。

resolve 是用于帮助找到模块的绝对路径的库，resolver（解析器）

 import { a } from "moduleA"

假设有一句 a 从 moduleA中引入， 为了检查任何对a的使用，编译器需要知道它表达的具体是 什么，并且需要检查它的定义moduleA

webpack中的解析规则

使用enhanced-resolve webpack能够解析三种文件路径

• 绝对路径
• 相对路径
• 模块路径

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容