[Day16] Webpack - AssetModules、DevServer

Asset Modules

Day15 的练习中，透过 loader 让 Webpack 可以读懂 css 语言，网页中的元素除了 css 样式外还会有图片、字型等等需要使用 loader 来处理，Webapck 5 版本整合了这些静态资源的 loader 成为一包 Asset Modules，可以直接使用。

配置方法：

module.exports = {
 module: {
   rules: [
     {
       test: /\.png/,
       type: 'asset/resource'
     }
   ]
 },
};

即时显示结果－webpack-dev-server

每次编辑完文件都需要执行build来检查成果不是很方便，webpack-dev-server 可以建置本地服务器，只要编辑完储存档案就能即时看到新的结果。

1. 安装dev-server套件。

   $ npm i -D webpack-dev-server
   

2. 修改 webpack.config.js。

   module.exports = {
     devServer: {
      static: { 
      // 'dist'这个资料夹名称需要和输出点一致，不然会找不到开启的网页
        directory: path.join(__dirname, 'dist'),
      },
      compress: true,
      // 使用本地的 XXXXport 来架设服务器，可以自定为其他 port，要避免与其他程序冲突。
      port: 9000,
      // 服务器运行後自动用浏览器开启网页，可以改 false 取消
      open: true,
      },
   }
   

3. 修改 package.json

   "scripts": {
     // 新增指令
     "dev": "webpack serve"
   },
   

4. 完成後执行npm run dev来测试成果。

5. 备注：

   • 开启 devServer 後，终端机会保持在 server 运行的状态，没办法再执行其他指令，这时可以按Ctrl + C关闭服务器，就会解除终端机锁定。
   • 指令名称也可以用特殊字 "start"，执行时只要输入npm start，不需要加上 run。