webpack打包---编译转换

Posted 2021-06-05 michael_yqs

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']
    }
  }
}