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) => {
// 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']
}
}
}
原文地址:https://blog.csdn.net/Michael890818
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。