webpack

打包工具（靜態資源打包工具）

webpack的特點

1.對js以來進行整合處理
2.可以編譯sass，less等預編譯樣式
3.可以對js，html，圖片進行壓縮優化，比如減少空格和程式碼註釋

webpack的核心

1.entry 入口檔案
2.output 出口檔案
3.pugin 外掛
4.loader 轉換器
5.dev-serve 伺服器
6. mode 模式

webpack手動搭建步驟

1.全域性安裝 webpack 4.35.3版本的

2.使用npm init -y 初始化一個package.json

3.建立一個src，src下面建立一個index.html  

4. src 中建立一個 main.js 作為主要開發檔案，在裡面進行dom操作，操作html中的root div
5. 
5.可以使用打包命令  webpack src/main.js --output src/bundle.js 手動配置出口檔案和入口檔案進行打包，但是這樣很麻煩，所以我們可以在配置一下

6.建立一個webpack.config.js,在裡面配置一下程式碼
   const path = require("path")
      module.exports = {
          entry:"./src/main.js",
          output:{
              filename:"bundle.js",
              path:path.resolve(__dirname,"dist")
          }
      }
 然後打包的時候只需要webpack命令即可
 
7.每次我們程式碼需要更新是都要webpack一下才行，這裡我們可以配置一個
本地伺服器來幫助我們自動同步程式碼
首先執行 cnpm i webpack-dev-server -D
然後再package.json裡配置 "dev": "webpack-dev-server --open --port 8888 --contentBase src --hot" 熱啟動 8888是埠號
最後 npm run dev 執行

8.如果發生報錯可能是webpack 版本的問題
執行 cnpm i webpack@4.35.3 webpack-cli@3.3.5 -S即可

9.配置sass 執行以下程式碼
 cnpm i node-sass sass-loader style-loader css-loader -D 
 在webpack.config.js 配置 規則
    module: {
        rules: [
            //解析.scss檔案,對於用 import 或 require 引入的sass檔案進行載入，以及...宣告的內部樣式進行載入            
            {
              test: /\.scss$/,
              use:['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }

10.打包時自動生成 html 頁面
 下載依賴 cnpm i html-webpack-plugin -D
  在webpack.config.js  配置
      // 外掛
      plugins:[
          new htmlWebpackPlugin({
              filename:"index.html",
              template:path.join(__dirname,'index.html')
          })
      ],
在這裡需要注意的是index.html要跟src同級