铁人12前哨站 - Webpack 帮你管(1)

又要来到一年一度的铁人赛啦~先来一个礼拜的工具複习吧，这礼拜姑且先複习些帮助开发的工具吧

本日主题： Webpack 4

前言：为甚么我们需要 Webpack 呢
从网页开发这概念出现到现在历经了许多的概念与想法，其中不乏有些已经开始无法适应现代大型开发的概念，以专案管理来说，从以前的义大利麵式到如今的分离式，中间有多少工程师的血与泪就不是这次的主题了；一个良好的专案管理可以帮助开发者釐清自己的思绪，帮助接手的人或是团队能够迅速理解目前的状况，并且统一资源，这就是今天的主角 Webpack 可以帮助你做到的事!

正式启用：

确认本地环境有安装 node.js 以及 npm进入专案目录，执行专案初始化 npm init安装 webpack 以及 webpack-cli npm install webpack webpack-cli --save-dev建立资料夹 src ，以后大部分档案皆会在此目录中，并在内建立一档案 index.js再建立一档案，取名为 bar.js，放到 src/script 此位置其内部内容如下

export default function bar(){    document.write('this is bar script');}

回到 index.js 将我们已经建立的 bar.js 引用进来

import bar from './script/bar.js';bar();

回到根目录，并创立一档案，名为 webpack.config.js，其内部内容如下

const path = require('path') // 引用 path 模组module.exports = {    entry: './src/index.js', //设立进入点    output: {        filename: 'bundle.js', //设立产出档案名称        path: path.resolve(__dirname,'dist') //设立产出目录    }}

在根目录中的 package.json 内 scripts 区块添加一指令，并执行npm run start

"script": {    "start": "webpack" //使 npm 能够编译 webpack}

建立一 html 档案，并引用 dist/bundle.js 就可以看到效果啰

今天先大致介绍 webpack 最基本的编译功能，我们可以看到 dist/bundle.js 中已经跟我们一开始建立的档案不一样了，后续有更多的内容可以去专研，剩下的就隔天再说吧~