開門見山
### 一. 概述
什麼是webpack
子產品打包機：它做的事情是，分析你的項目結構，
找到JavaScript子產品以及其它的一些浏覽器不能直接運作的拓展語言
（Scss，TypeScript等），并将其轉換和打包為合适的格式供浏覽器使用。
### 為什麼使用webpack
現在是網絡時代，在我們的生活中網絡成為了必不可少的，
我們在網絡上可以看到很多漂亮功能豐富的頁面，
這些頁面都是由複雜的JavaScript代碼和各種依賴包組合形成的，
那麼這些都是怎麼*組合在一起的呢，組合在一起需要花費多少精力呢，
經過漫長發展時間現前端湧現出了很多實踐方法來處理複雜的工作流程，讓開發變得更加簡便
安裝webpack
安裝為開發依賴
npm安裝,指令行輸入: npm i webpack webpack-cli -D
安裝為開發依賴
cnpm安裝,指令行輸入:npm i webpack webpack-cli -D
安裝為開發依賴
yanr安裝,指令行輸入:yarn add webpack webpack-cli --save
webpack快速上手
檔案目錄如上，在項目的根目錄下運作指令行: yarn webpack 即可
如果覺得yarn webpack比較麻煩，可以在scripts 生成自定義的指令
然後自動生成一個dist檔案夾裡面包含經過webpack打包過後的檔案
webpack配置檔案
webpack支援0配置，預設從src檔案的index.js 打包到dist檔案夾下的main.js，但是很多時候我們需要自己配置webpack更好地項目開發
項目的根目錄下建立一個webpack.config.js 配置如下，這個檔案運作在nodejs的環境下也就是說遵循commonjs規範
const path = require('path');
module.exports = {
mode: "development", //none/development/production
entry: "./src/index.js", //項目的入口檔案，如果是相對路徑./是不能省略的
publicPath: "dist/", //公共路徑，此處的“/”不能省略
output: {//指定輸出檔案的路徑和檔案名
filename: "bundle.js", //輸出的檔案名
path: path.join(__dirname, 'output') //指定輸出的路徑
},
module: {
rules: [{
test: /.css$/,
use: [
'style-loader', 'css-loader'
]
}]
}
}
webpack工作模式
mode是webpack4新增的一條屬性，它的意思為目前開發的環境。
mode的到來減少了很多的配置，它内置了很多的功能。相較以前的版本提升了很多，減少了很多專門的配置
優點如下
提升了建構速度
預設為開發環境，不需要專門配置
提供壓縮功能，不需要借助插件
提供SouceMap，不需要專門配置
mode分為兩種環境，一種是開發環境（development）,一種是生産環境（production）/ none。
開發環境就是我們寫代碼的環境，生産環境就是代碼放到線上的環境。這兩種環境的最直覺差別就是，
開發環境的代碼不提供壓縮優化打包結果，生産環境的代碼提供壓縮。開發環境優化打包速度添加一些輔助工具到我們的代碼當中友善調試
node模式運作最原始的打包不會做任何的處理
mode: "development", //none/development/production 在配置檔案加上這個選項即可
webpack資源子產品加載
webpack打包css檔案，需要使用css-loader和style-loader，用于解析css樣式檔案
module: {
rules: [{
test: /.css$/,//css正規表達式檔案路徑
use: [
'style-loader', 'css-loader'//使用成css-loader和style-loader
//用于解析css樣式 從後往前執行loader
]
}]
}
webpack加載檔案子產品
在js中引入css檔案隻需要 import "./main.css"檔案，webpack在打包的時候自動會自動引入檔案
謝謝觀看，如有不足，敬請指教