轉譯輸出到不同資料夾之目地檔

Posted on 2018-10-17 Edited on 2023-11-24 In webpack Views: Disqus:

原本的資料結構是長這樣子

test

|- /dist

|- index.html

|- /node_modules

|- /src

|- app.js

package-lock-json

package.json

webpack.config.js

index.html 內容為

<!doctype html>
<html>

<head>
    <title>Getting Started</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

app.js 內容為

console.log('app.js');

webpack.config.js 內容為

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist')
  }
};

資料隨著時間而增加變動，現在想做各別轉譯輸出到不同資料夾之目地檔，資料結構如下

test

|- /area

|- /dist

|- /src

|- home.js

|- /dist

|- index.html

|- /node_modules

|- /src

|- app.js

package-lock-json

package.json

webpack.config.js

home.js 內容為

console.log('home.js');

為了方便看測試結果 index.html 改為

<!doctype html>
<html>

<head>
    <title>Getting Started</title>
</head>

<body>
    <script src="app.js"></script>
    <script src="../area/dist/home.js"></script>
</body>

</html>

這時 webpack.config.js 的內容要改為

const path = require('path');

module.exports = {
  entry: {
    'dist/app': './src/app.js',
    'area/dist/home': './area/src/home.js',
  },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, '')
  }
};