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打包---编译转换的主要内容,如果未能解决你的问题,请参考以下文章