webpack 和 babel

• webpack和babel通常配合起来使用
• babel是js编译工具,能将es6或者一些特殊语法做一些转换，只做文件转义，不做文件整合。
• webpack是一个打包工具，内置只能处理js，但是它可以加载很多的loader处理css,img,ts,vue等其他文件,最终输出js文件。
• webpack通过使用babel-loader使用Babel

webpack是一个打包工具，打包js、css、图片、html等，它可以分析整个项目的文件结构，确认文件之间的依赖，将文件合成、压缩、加入hash等，生成最终项目文件。webpack把所有文件当成模块，但是webpack内置默认的加载器是处理js的，如果要处理其他类型的文件则需要引入不同的loader加载器，用来转化其他文件进行编译打包。webpack通过使用babel-loader使用Babel

webpack.config.js （module.rules 允许你在 webpack 配置中指定多个 loader）

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
      {
        test: /\.(t|j)sx?$/,
        exclude: { and: [/node_modules/] },
        loader: require.resolve('babel-loader'), // 使用babel
        options: { // babel中的配置
          presets: ['@babel/preset-env'], // ...babelConfig.presets,
          plugins: [], // ...babelConfig.plugins,
          // ... babelConfig.others
        },
      },
    ],
  },
};

babel是一个JS编译器，用来将ES6/ES7等语法转换为ES5语法（浏览器不认识的语法编译成浏览器认识的语法），从而能够使代码在大部分浏览器中运行。但是babel转换语法时有一些新的api是不转化的，比如promise、Object.assign等，所以babel还提供了很多插件，如babel-polyfill。

.babelrc / babel.config.js

{
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false, // preset-env在转码的时候会把es6模块化的语法转成其它模块化的语法，但在项目中我们希望保留es6模块化的语法，所以 配置modules: false,，告诉babel不需要转成其它模块化的语法
        targets: {
          chrome: '49', // 需要兼容的浏览器最低版本
        },
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
}

联系：

·  webpack和babel通常配合起来使用

·  babel是js编译工具,能将es6或者一些特殊语法做一些转换，只做文件转义，不做文件整合。

·  webpack是一个打包工具，内置只能处理js，但是它可以加载很多的loader处理css,img,ts,vue等其他文件,最终输出js文件。

·  webpack通过使用babel-loader使用Babel

一些很好的问题:  答案在关于webpack的面试题总结 - 知乎 (zhihu.com)

问题列表

1. webpack与grunt、gulp的不同？
2. 与webpack类似的工具还有哪些？谈谈你为什么最终选择（或放弃）使用webpack？
3. 有哪些常见的Loader？他们是解决什么问题的？
4. 有哪些常见的Plugin？他们是解决什么问题的？
5. Loader和Plugin的不同？
6. webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全
7. 是否写过Loader和Plugin？描述一下编写loader或plugin的思路？
8. webpack的热更新是如何做到的？说明其原理？
9. 如何利用webpack来优化前端性能？（提高性能和体验）
10. 如何提高webpack的构建速度？
11. 怎么配置单页应用？怎么配置多页应用？
12. npm打包时需要注意哪些？如何利用webpack来更好的构建？
13. 如何在vue项目中实现按需加载？

Webpack 高频面试题 - 掘金 (juejin.cn)