[day19][後端][實作] Again，從webpack開始打包的Express（三）

前情提要

上一篇已經利用webpack重構完成了，但是express是在路由被觸發的時候才去尋找檔案。所以這邊要追加讓檔案自動移動到目的地的功能，這邊就是webpack的plugin功能。有許多功能都可以利用這樣的方式追加，這邊讓views的檔案自動移動到dist就算ok了

首先直接開啟伺服器

npm start

連到(http://localhost:3000/ )會看到一樣是壞的，然後把views資料夾複製到dist內。在重新整理網頁，就能正常顯示頁面了！

然後注意看到伺服器狀態出現的404，是因為找不到css檔案。這是因為public的檔案一樣沒有傳送過去，這邊是透過同一個plugin進行的

這個plugin的網址如下(https://www.npmjs.com/package/copy-webpack-plugin )

npm i copy-webpack-plugin --save-dev

接著關閉伺服器，開始設定"webpack.config.js"設定檔。追加plugin設定

webpack.config.js

/* webpack.config.js ： Webpack 的設定檔 */
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const CopyPlugin = require('copy-webpack-plugin');
const serverConfig = {
  target: 'node',
  entry: {
    'index': './src/www'
  },
  node: {
    __dirname: false,
    __filename: true,
  },
  output: {
    path: path.join(__dirname, 'dist'),
    // 獲取絕對路徑的方法
    filename: '[name].bundle.js'
  },
  externals: [nodeExternals()],
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: path.join(__dirname, 'src/server/views'), to: path.join(__dirname, 'dist/views') },
        { from: path.join(__dirname, 'src/client/static'), to: path.join(__dirname, 'dist/public') },
      ]
      // 指定來源與目的地
    })
  ],
}
module.exports = [serverConfig];

接著再"client"建立"static"資料匣內在建立一個"stylesheets"後再建立一個style.css檔

src\client\static\stylesheets\style.css

body{
  padding: 50px;
  font: 60px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a{
  color: #00B7FF;
}

啟動webpack

npm run webpack

這樣所有東西都過去拉，接著開啟伺服器進入網站(http://localhost:3000/ )

讀到了～！這樣plugin的一個功能就完成了，plugin有各種可能的功能！有碰到想要的功能再慢慢找和研究就可以了。

githubday19