webpack打包---编译转换

Posted michael_yqs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack打包---编译转换相关的知识,希望对你有一定的参考价值。

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 函数
// 对于 esm 默认导出方式,需要通过 require 导入结果的 default 属性去获取
const foo = require('./foo.js').default;
const icon = require('./icon.png');
require('./main.css');
  • 遵循 AMD 标准的 define 函数和 require 函数
define(['./foo.js', './icon.png', './main.css'], (foo, icon) => 
  // TODO: sth.
);
require(['./foo.js', './icon.png', './main.css'], (foo, icon) => 
  // TODO: sth.
)

 

  • 样式代码中的 @import 指令和 url 函数
@import './reset.css';

body: 
  /* url 触发了资源加载,会把它交给 url-loader 处理 */
  background: url('./icon.png');
  • html 代码中图片标签的 src 属性
<img src="./icon.png">
// HTML 文件会将 html代码 作为字符串导出
import footerHtml from './footer.html';
// 写入到页面
document.write('footerHtml');

导入 HTML 模块需要使用 html-loader;html-loader 默认只会处理 img 的 src 属性,如果需要处理其他标签的属性(如:href),则可以在 html-loader 中添加配置选项 attrs


  test: /.html$/,
  use: 
    loader: 'html-loader',
    options: 
      // 默认只支持 img:src。添加其他标签的属性
      attrs: ['img:src', 'a:href']
    
  

 

 

以上是关于webpack打包---编译转换的主要内容,如果未能解决你的问题,请参考以下文章

webpack打包---编译转换

webpack打包---编译转换

webpack 入门

webpack打包原理

webpack面试题

webpack基础