[Day14] Webpack 入门 - 环境设定篇

虽然各式各样的工具会导入到专案中来提高效率，但是浏览器能看懂得档案只有 HTML、CSS、JavaScript，使用工具撰写的 SCSS、SASS...等档案是没有办法直接运作的，Webpack 像是一个超级工厂，解读我们的各种开发文件，并且打包制作成浏览器看得懂的三大语言。

1. Webpack 安装

1. 事前准备

   • 准备一个专案资料夹（资料夹名称请不要取 webpack，可能会报错）
   • 安装 NPM 或 Yarn
   • 完成 NPM 或 Yarn 初始化（相关作法可以参考 Day13 的文章）

2. 安装 webpack 和 指令工具（webpack-cli）

   $ npm i -D webpack webpack-cli
   

2. 认识『进入点』与『输出点』

文章开头有提到 Webpack 像是一个超级工厂，而放原料的地方就是『进入点』，加工完的成品会放到『输出点』，在 Webpack 官网首页的图片非常清楚的说明了这个概念。

Webpack 官方网站

1. Webpack 在 4.0 以後的版本有预设的『进入点』和『输出点』，分别是：

• 进入点：src/index.js
• 输出点：dist/main.js

2. 在不变更设定的情况下『输出点』会在执行 webpack 後自动建立，但是『进入点』的src目录需要自行在专案资料夹下建立（自订『进入点』和『输出点』方式在下面段落说明）。
3. 建立好 src资料夹後，在里面新增一个index.js档案，并且加入一些程序码，後续测试使用。

let a = 'Hello';
let b = 'webpack';
console.log(`${a}, ${b}!!!`);

3. 执行 Webpack

安装好 Webpack 後并不会出现什麽按钮让你使用，而是要在专案的设定档里面自订指令来执行 Webpack:

1. 开启『package.json』，找到属性 "scripts"，格式是"指令名称": "执行内容"这边已经有先撰写了一段测试指令，可以先测试看这个指令是不是能正常运作。

// 使用 npm run 来执行 script
$ npm run test

// 部分特殊的名称可以不需要加 run
$ npm test

2. 新增 webpack 上去。

"build": "webpack"

"build" 名称可以任意更改，要改成 "rm -rf/" 也没问题（执行含空格的指令名称需要用引号包起来）。

3. 执行 webpack（前面的安装步骤如果漏掉 webpack-cli 没有安装，会在这时提醒下载）

$ npm run build

4. 出现以下画面表示尚未设定为开发模式或是上线模式，不影响执行，後续再设定就好。
   

5. 执行成功後，专案资料夹会出现一个 dist 资料夹，里面有一个 main.js 档案，内容就是 Webpack 处理完的结果。

console.log("Hello, webpack!!!");

4. 自订『进入点』与『输出点』

1. 在专案资料夹底下新增一个档案，档名『webpack.config.js』，参考下方说明撰写设定。

   // 引用 node.js 里面的路径（path）模组，在下面会用到
   const path = require('path');
   
   module.exports = {
     // 设定进入点的档案路径和档名
     entry: './src/index.js',
     // 设定输出点
     output: {
       // 设定路径，这边使用到刚刚宣告的 path，__dirname 可以取得这个专案资料夹的完整绝对路径，dist 名称可以自行更改，也可以空值（''），就会放到专案资料夹第一层（通常不会去改动他）
       path: path.resolve(__dirname, 'dist'),
       // 设定档名，常见的输出档名为 main.js 或 bundle.js，可以自行更改
       filename: 'bundle.js',
     },
   };
   

2. 设定完成後执行npm run build，检查设定是否成功。

5. Webpack 的开发／上线模式

1. 在没有设定模式时执行 Webpack 都会跳出警告，有两种方式可以解决：

   • 自订指令带入参数：编辑 package.json 档案的 "scripts"

     // 修改原本的 build 指令，改成两个指令对应不同模式
     
     // 加入开发版指令
     "dev": "webpack --mode development",
     
     // 加入上线版指令
     "deploy": "webapck --mode production"
     

   • 修改 Webpack 环境设定：编辑 webpack.config.js

     module.exports = {
       // 内容填入 development 或是 production
       mode: 'development',
     };
     

2. 开发模式与上线模式的差别：

   • 开发模式产出的档案会详细记录细节，产出的档案会有非常多注解，档案也会比较大。
   • 上线模式产出的档案会优化成最简短的程序码（需要的时间也会比较长），换行、无效空白、注解等都会被移除，不利於阅读，但是档案会比较小。