demo03 webpack默认支持各类模块化规范

1.模块化规范

webpack 默认支持 es6 , Commonjs , AMD , umd 规范。

详见 webpack 模块文档: www.webpackjs.com/concepts/mo…

2.目录结构

// `--` 表明目录， `-` 表明文件
--demo03
  --src
    --lib 
      -hello-amd.js
      -hello-common.js
      -hello-es6.js
    -app.js
  -babel.config.js
  -index.html
  -webpack.config.js
复制代码

hello-amd.js

// 使用amd规范来写代码
define(function (require, factory) {
  'use strict';
  return function () {
    console.log('amd: hello world!');
  }
});
复制代码

hello-common.js

// 使用commonjs规范来写代码
module.exports = function () {
  console.log('common: hello world!');
};
复制代码

hello-es6.js

// 使用es6规范来写代码
export default function () {
  console.log('es6: hello world!');
}
复制代码

app.js

/**
 * webpack支持ES六、CommonJs和AMD规范
 */

// ES6
import es6Hello from './lib/hello-es6';
es6Hello();

// CommonJs
var commonHello = require('./lib/hello-common');
commonHello();

// AMD
require(['./lib/hello-amd'], function (helloAmd) {
  helloAmd();
});
复制代码

3.编写 webpack 配置文件

webpack.config.js

const path = require("path");

module.exports = {
  mode: 'production' || 'development',
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // 打包后资源文件的引用会基于此路径，也能够设置为cdn：https://www.xxx.com(把这句注释掉，运行index.html试试)
    path: path.resolve(__dirname, "dist"), // 打包文件的输出目录
    filename: "app.bundle.js"
  }
};

复制代码

4.执行打包命令

(默认你已经安装了全局 webpack 以及 webpack-cli )

webpack
复制代码

打包成功后，打包结果在 dist 文件夹中

5.验证打包结果

建立 index.html 文件,引用打包好的主文件 (bundle.js) , 利用 Chrome 浏览器打开，并查看控制台。

输出结果：

es6: hello world!
common: hello world!
amd: hello world!
复制代码

6.源码地址

demo 代码地址: github.com/SimpleCodeC…

仓库代码地址(及目录): github.com/SimpleCodeC…