webpack打包---编译转换

michael_yqs

于 2021-05-12 20:38:54 发布

阅读量575

点赞数 1

分类专栏： webpack 前端开发文章标签： webpack 前端

本文链接：https://blog.youkuaiyun.com/web_doris/article/details/116720787

版权

本文介绍了webpack默认只打包js模块且不转化ES新特性，如箭头函数。通过添加babel-loader，可以将ES新特性转化为浏览器可识别的语法。详细讲解了webpack的模块加载方式，包括import、require、define等，并提到了html-loader在处理HTML模块时的配置选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack 编译 ES2015

webpack 默认只是对 js 模块的打包，并不会对 ES 新特性进行转化。import和export 默认能被打包，是因为这是eamodule的语法，但是其他es新特性语法并不会被转化，比如箭头函数并不会被编译成普通函数

使用 babel-loader 转化 ES 新特性

npm install babel @babel/core @bable/preset-env

module.rules 中使用 babel

module: {
  rules: [
    {
      test: /.js$/,
      use: {
        loader: 'babel-loader',
        options: ['@babel/preset-env']// babel使用的插件
      }
    }
  ]
}

webpack 模块加载方式

遵循 ES Moudles 标准的 import 声明

import foo from './foo.js';
import { bar } from './foo.js';
import icon from './icon.png';
import './main.css';

遵循 CommonJS 标准的 require 函数

最低0.47元/天解锁文章