ES6入门十二：Module（模块化）

webpack4打包配置babel7转码ES6
Module语法与API的使用
import()
Module加载实现原理
Commonjs规范的模块与ES6模块的差异
ES6模块与Nodejs模块相互加载
模块循环加载

一、webpack4打包配置babel7转码ES6

1.webpack.config.js

在webpack中配置babel转码其实就是在我之前的webpack配置解析基础上添加babel的加载器，babel的具体转码配置在之前也有一篇详细的博客做了解析：

在原本的webpack配置基础上添加加载器（原配置详细见：webpack安装与核心插件）：

//下载babel加载器：babel-loader
npm install babel-loader --save-dev

然后关键的webpack.config.js配置代码是下面这一段：

 1 module.exports = {
 2     ...
 3     module:{
 4         rules:[
 5             {
 6                 test: /\.js$/,
 7                 loader:'babel-loader',
 8                 exclude: /node_modules/
 9             }
10         ]
11     }
12     ...
13 }

完整的webpack.config.js代码在这里：

 1 const path = require('path');
 2 const root = path.resolve(__dirname);
 3 const htmlWebpackPlugin = require('html-webpack-plugin');
 4 
 5 module.exports = {
 6     mode:'development',
 7     entry:'./src/index.js',
 8     output:{
 9         path: path.join(root, 'dist'),
10         filename: 'index.bundle.js'
11     },
12     module:{
13         rules:[
14             {
15                 test: /\.js$/,
16                 loader:'babel-loader',
17                 exclude: /node_modules/
18             }
19         ]
20     },
21     plugins:[
22         new htmlWebpackPlugin({
23             template:'./src/index.html',
24             filename:'index.html'
25         })
26     ]
27 }

View Code