「邁出一步，再也無法返回；
去往——三千世界的血之海。」——久保袋人

（沒有打算跟我統一開發環境的小夥伴可以跳過今天的內容，明天開始才會真的碰到vue的源碼。）

安裝webpack

書接上回，我們會先用webpack搭建開發環境，畢竟沒有Vue哪來的vue cli呢XD
所以首先，我們要先去webpack官網找到安裝教學，並按指示輸入以下命令：

mkdir {{ 你的專案名 }}
cd {{ 你的專案名 }}
npm init -y
npm install webpack webpack-cli --save-dev
npm install

之後我們再建立/src/index.js，在其中隨便寫點甚麼。
然後再參考webpack官網的Development在控制台下以下命令安裝開發環境所需的依賴：

npm install webpack-dev-server html-webpack-plugin

最後再於根目錄創建webpack.config.js設定檔如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js'
  },
  devtool: 'inline-source-map',
 devServer: {
   static: './dist',
 },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Development',
    }),
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
 optimization: {
   runtimeChunk: 'single',
 },
};

（複製貼上官網的程式碼的小夥伴需要注意，請將使用到print.js的部分刪除或註解，因為我們並不需要這個步驟。）
此時我們的專案應該長這樣：

然後我們就可以在終端輸入以下命令：

webpack serve --open

沒意外的話應該要能看到/src/index.js的效果，開發環境便建構完成啦～

安裝typescript及less（非必要，但建議至少安裝typescript）

在終端下以下指令安裝相關依賴：

npm i -D css-loader less less-loader style-loader ts-loader typescript

修改webpack.config.js為webpack.config.ts如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index'
  },
  devtool: 'inline-source-map',
  devServer: {
    static: './dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Development'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  optimization: {
    runtimeChunk: 'single'
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  }
};

新建/src/assets/css/style.less用於設置less樣式，並於/src/index.js新增以下程式碼將其引入：

import './assets/css/style.less';

最後將所有.js文件修改為.ts文件，此時你的專案應該長這樣：

如果執行webpack serve --open不會報錯，就代表我們今後可以使用typescript（之後簡稱ts）進行開發啦～

修改package.json的script屬性

修改package.json的script屬性如下：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack serve --open"
}

之後在命令行即可輸入我們最熟悉的npm run dev來代替webpack serve --open。

經過一番折騰，此時我們應該已經整頓好了今後開發所需的環境，下一篇文章起咱將正式進入源碼的環節。
邁出一步，再也無法返回；去往——三千世界的血之海吧！

話說都來學Vue3源碼了，我基礎知識也需要講這麼詳細嗎（？）

最後再附上github連結，可以在main分支的commit「[Day 02]webpack環境搭建」找到今天的進度。