Webpack 超入門安裝

Oct 5 2019 Documentation a minute read (About 223 words)

Global Installation
1
npm install webpack --save-dev
建立專案資料夾
- mkdir <folder name>
- cd <folder name>

建立 npm 專案
- npm init
  1. package name : 專案名稱
  2. version : 版本號
  3. description : 專案敘述
  4. entry point : 專案執行進入點 ( 預設值為 index.js)
  5. test ccommand : 專案測試指令
  6. git repository : 專案原始碼的版本控管位置
  7. keywords : 專案關鍵字
  8. author : 專案作者
  9. license : 專案版權

建置文件

src/index.js
1
2
3
import bar from './bar';

bar();

src/bar.js

1
2
3

export default function bar() { 
  //
}

設定 webpack.config.js 檔

const path = require('path'); // 引用 path 模組

module.exports = {
    entry: './src/index.js', // webpack 打包對象
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
};

在 html / or 文件中引入

<!doctype html>
<html>
    <head>
        ...
    </head>
    <body>
        ...
        <script src="dist/bundle.js"></script>
    </body>
</html>

執行
1
npx webpack --config webpack.config.js

Reference

#JavaScript

Webpack 超入門安裝

Reference

Comments

Your browser is out-of-date!