demo03 webpack預設支援各種模組化規範

2021-09-24 07:58:02 字數 1568 閱讀 1138

webpack 預設支援es6,commonjs,amd,umd規範。

詳見 webpack 模組文件: www.webpackjs.com/concepts/mo…

// `--` 代表目錄, `-` 代表檔案

--demo03

--src

--lib

-hello-amd.js

-hello-common.js

-hello-es6.js

-babel.config.js

-index.html

-webpack.config.js

複製**

hello-amd.js

// 使用amd規範來寫**

define(function (require, factory)

});複製**

hello-common.js

// 使用commonjs規範來寫**

module.exports = function () ;

複製**

hello-es6.js

// 使用es6規範來寫**

export default function ()

複製**

/**

* webpack支援es6、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) );

複製**

webpack.config.js

const path = require("path");

module.exports = ,

output:

};複製**

(預設你已經安裝了全域性 webpack 以及 webpack-cli )

webpack

複製**

打包成功後,打包結果在 dist 資料夾中

建立 index.html 檔案,引用打包好的主檔案 (bundle.js) , 利用 chrome 瀏覽器開啟,並檢視控制台。

輸出結果:

es6: hello world!

common: hello world!

amd: hello world!

複製**

倉庫**位址(及目錄): github.com/******codec…

npm安裝及webpack打包小demo

node node.js 安裝 npm config set registry npm info underscore 如果上面配置正確這個命令會有字串response 修改配置檔案加快 npm install安裝環境依賴 npm init初始化package.json初始化工程 npm insta...

webpack入門demo(二)打包css

模組開發,在我看來就是把乙個檔案模組的資料拿出來,另乙個檔案接收這個資料,就是特麼不寫在一起 對小專案來說,有點多此一舉的感覺 commonjs規範讓js也可以寫後端,連資料庫,寫介面 require exports 匯入匯出定義模組 講這個好像跟webpack沒什麼關係 如果寫過node專案的話應...

vue cli 03 webpack基本配置說明

下來我們乙個乙個介紹build資料夾下面的一些配置 check versions.js use strict const chalk require chalk 輸入終端的一些樣式,紅色或者綠色,可以通過這個模組來定義 const semver require semver 處理版本號 const ...