面试题：Vue中Vue CLI结合Webpack与Babel实现功能扩展的基础配置

Question

请描述一下在Vue CLI项目中，如何通过Webpack和Babel配置，实现ES6+语法的支持以及自定义的模块打包规则？请简要说明配置步骤和关键配置项。

Answer 1

实现ES6+语法支持

1. 安装依赖：
   • 安装 @babel/core 和 @babel/preset - env。@babel/core 是Babel的核心编译器，@babel/preset - env 允许你使用最新的JavaScript语法，并将其转换为向后兼容的版本。

   npm install --save - dev @babel/core @babel/preset - env
   

2. 配置Babel：
   • 在项目根目录下创建或编辑 .babelrc 文件（如果使用Babel 7+，也可使用 babel.config.js）。
   • 以下是 .babelrc 的基本配置示例：

   {
       "presets": [
           [
               "@babel/preset - env",
               {
                   "targets": {
                       "browsers": ["ie >= 11"] // 根据项目需要设置目标浏览器
                   }
               }
           ]
       ]
   }
   

   • @babel/preset - env 会根据 targets 中指定的浏览器环境，自动确定需要转换的语法。

自定义模块打包规则

1. 使用 vue - cli - service 配置Webpack：
   • 在Vue CLI项目中，vue - cli - service 已经集成了Webpack。如果要自定义Webpack配置，可以在项目根目录下创建 vue.config.js 文件。
2. 配置模块规则：
   • 例如，要配置SCSS加载器，先安装相关依赖：

   npm install --save - dev sass - loader node - sass
   

   • 在 vue.config.js 中配置：

   module.exports = {
       chainWebpack: config => {
           // 配置sass-loader
           config.module
             .rule('scss')
             .test(/\.scss$/)
             .use('sass - loader')
             .loader('sass - loader')
             .end();
       }
   };
   

   • 上述代码使用 chainWebpack 函数，通过链式调用对Webpack的 module.rules 进行配置，这里针对 .scss 文件添加了 sass - loader。

   • 如果要配置自定义的文件加载规则，例如加载字体文件：

   module.exports = {
       chainWebpack: config => {
           config.module
             .rule('fonts')
             .test(/\.(woff|woff2|eot|ttf|otf)$/)
             .use('file - loader')
             .loader('file - loader')
             .options({
                   name: 'fonts/[name].[ext]'
               });
       }
   };
   

   • 这里对字体文件（.woff、.woff2 等）配置了 file - loader，并指定输出路径为 fonts/ 目录。