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…