[day19][後端][實作] Again,從webpack開始打包的Express(三)



前情提要

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

首先直接開啟伺服器

npm start

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

https://ithelp.ithome.com.tw/upload/images/20201003/20130673VMbkydgExh.jpg

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

https://ithelp.ithome.com.tw/upload/images/20201003/20130673l11D1q6G7d.jpg

這個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/ )

https://ithelp.ithome.com.tw/upload/images/20201003/20130673QpYQfZxXr4.jpg

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

githubday19

張貼留言

0 留言