-vuecomponents
        -src
            -components
              -Header.vue
              -Main.vue
              -Item.vue
              -Footer.vue

            -public
                -main.html
                -css
                   -css.css
                -imgs
                    -1.png

            -App.vue
            -main.js   

        -.gitignore
        -package.json
        -README.md
        -webpack.config.js   




搭建專案環境webpack
1.npm init 初始化，手動建立package.json/或者npn init

2.安裝webpack, npm i webpack webpack-cli -D

3.書寫webpack的配置檔案（參考官方文件）webpack.config.js
      //node內建核心模組，用來設定路徑。
      const { resolve } = require('path');
      //只能使用 CommonJS 規範暴露
      module.exports = {
        // 入口檔案配置
        entry: './src/js/app.js',               
        // 輸出配置
        output: {         
          // 輸出檔名
          filename: './js/built.js',    
          //輸出檔案路徑配置
          path: resolve(__dirname, 'build')  
          // 新增 devServer 服務後需要調整輸出的路徑
            publicPath: '/'  
        },
        // development 與 production 開發環境(二選一)
        mode: 'development'  
        
        module:{
              rules:[]
        }

      plugins: [
            
          ]
                    
      };



4. webpack可以直接執行    npm需要配置package.json檔案中scripts啟動選項 npm run 去啟動
"server": "webpack", 直接在本地打包生成dist資料夾

5.執行之後html和打包生成的js不會自動引用      配置外掛html-webpack-plugin打包連帶html檔案
安裝； npm  i html-webpack-plugin -D
    webpack配置檔案
    1.const HtmlWebpackPlugin = require('html-webpack-plugin');
    2.new HtmlWebpackPlugin({
        template: './src/public/index.html', // 設定要編譯的 HTML 原始檔路徑
        }),
    3.此時npm run server， 打包資料夾dist中。index.html自動會引入main.js  

6.清除打包檔案目錄，每次打包生成了檔案，都需要手動刪除，引入外掛 `clean-webpack-plugin` 幫助我們自動刪除上一次生成的檔案
安裝；npm install clean-webpack-plugin --save-dev
    webpack配置檔案；

    1. 引入外掛 const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 
    2. 配置外掛  new CleanWebpackPlugin() 

7.藉助 Babel 可以將瀏覽器不能識別的新語法（ES6, ES7）轉換成原來識別的舊語法（ES5），瀏覽器相容性處理
安裝loader；npm install babel-loader @babel/core @babel/preset-env --save-dev
配置loader;  
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }


8.main.js中引入css檔案； import  './public/css/index.css'

9.打包 css 資源，css 檔案 webpack 不能解析，需要藉助 loader 編譯解析
安裝 loader;   npm install css-loader style-loader  --save-dev 
      webpack配置檔案；
      1.//解析css
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader'] //前後順序不能顛倒
            },


10. 打包樣式檔案中的圖片資源,圖片檔案 webpack 不能解析，需要藉助 url-loader編譯解析
安裝 loader； npm install file-loader url-loader --save-dev 
      webpack配置檔案；
      1.解析圖片 媒體檔案
            {
              test: /\.(png|jpg|gif)$/,
              use: [
                {
                  loader: 'url-loader',
                  options: {
                    limit: 8192
                  }
                }
              ]
            },

11.自動編譯並執行，每次修改程式碼都需要重新執行 webpack 命令，可以使用 webpack-dev-server 自動打包執行
安裝 loader； npm install webpack-dev-server --save-dev
      webpack配置檔案；
      1. 新增 devServer 服務後需要調整輸出的路徑
              publicPath: '/'
      2. 增加 devServer 配置
          devServer: {
              open: true,     // 自動開啟瀏覽器
              compress: true, // 啟動gzip壓縮
              port: 3000,     // 埠號
              quiet:true
          },    

      3. npm需要配置package.json檔案中scripts啟動選項 npm run 去啟動
      "dev": "webpack-dev-server "  直接將打包檔案在記憶體中儲存

12.配置devtool 定位錯誤位置為原始程式碼的哪一行
      webpack配置檔案；  loader中配置
      devtool:  'cheap-module-eval-source-map', //設定 devtool 策略    

13.安裝vue ; npm i vue -S
main.js 引入vue  ； import Vue from 'vue'

14.vue-loader， 解析vue檔案
 

安裝 npm install -D vue-loader vue-template-compiler
webpack配置檔案；
1. 引入外掛 const VueLoaderPlugin = require('vue-loader/lib/plugin')
2. //配置vue相關loader
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
3.配置外掛在plugins中，new VueLoaderPlugin()  
4. 在css中修改配置//解析css
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader'] //前後順序不能顛倒
            },  

修改項；use: [ 'vue-style-loader', 'css-loader'] 
 
 

15. 在main.js引入元件APP入口檔案，import App from './App.vue'
render: h => h(App)  // 註冊我們的App元件，並且會把App元件進行渲染，並且runtime-only版本Vue可以使用

16.webpack配置副檔名和別名
webpack配置檔案；
resolve:{
    extensions: [".js", ".json", ".vue"], //自動解析包含的副檔名檔案，以後匯入不用帶副檔名
    alias: {
      //配置別名的地方
      '@': path.resolve(__dirname, 'src'), //這個別名代表以後@就是src的絕對路徑
    }
  }

17. git操作
      1.git init 倉庫初始化
      2.配置忽略檔案， .gitignore
      3.本地配置遠端倉庫的地址， git remote add origin https://github.com/xiaohigh/test2.git 
      4.本地提交 git add -A     git commit -m 'message'
      5.推送到遠端 git push origin master
      6.拉取遠端程式碼 git pull