Webpack/Babel/⼯程化 笔试题精讲1

核⼼概念

entry: ⼊⼝，webpack 构建第⼀步；

output: 输出

loader: 模块转换器，⽤于将模块的原内容按照需求转换成新内容；

plugin: 扩展插件,在 webpack 构建过程的特定时机注⼊扩展逻辑，⽤来改变或优化构建结果；

mode: 控制打包环境

通过选择 development, production 或 none 之中的⼀个，来设置 mode 参数，你可以启⽤ webpack 内置在相应环境下的优化。其默认值为 production。

devserver: 是⼀个⼩型的 node.js Express 服务器，使⽤ webpack-dev-middleware 中间件来为通过 webpack 打包⽣成的资源⽂件提供 web 服务。

entry(⼊⼝)

⼊⼝起点(entry point) 指示 webpack 应该使⽤哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进⼊⼊⼝起点后，webpack 会找出有哪些模块和库是⼊⼝起点（直接和间接）依赖的。

index.js

import { add } from "./add"; 
console.log(add(3, 3));

add.js

export const add = (a,b) => a + b

webpack.config.js

module.exports = { 
    entry: "./src/index.js" 
};