Webpack 英文文檔
<body>
<ul class="layerOne">
<li class=""><strong class="layerOneTitle">entry入口</strong></li>
<li><strong class="layerOneTitle">output出口</strong></li>
<li><strong class="layerOneTitle">loader</strong>
<ul>
<li>webpack自身隻能了解JavaScript</li>
<li>loader可以将所有類型的檔案轉換為webpack能夠處理的<strong style="color: orange;">有效子產品</strong></li>
<li>轉換後進而可以建構依賴圖</li>
</ul>
</li>
<li><strong class="layerOneTitle">plugin</strong>
<li>執行更廣的任務</li>
<li>打包、優化、壓縮...重新定義環境中的變量</li>
<li>require->添加到plugin數組->options/new(不同目的多次使用同一個插件)</li>
<li><strong class="layerOneTitle">模式：model</strong>
<li>添加 mode: 'development'/'production'</li>
<li><strong class="layerOneTitle">拓展部分</strong>
<li>webpack提供指令行接口（cli）</li>
<li>webpack各種指令
<ul>
<li class="codeTitle">--help
<ul>
<li>列出指令行所有配置指令</li>
<li class="codeRow">webpack --help / webpack -h </li>
</ul>
</li>
<li class="codeTitle">--config
<li>為webpack指定一個其它的配置檔案（預設為 webpack.config.js ）</li>
<li class="codeRow">webpack --config anotherConfigFile.js </li>
<li class="codeTitle">--progress
<li>在指令行控制台列印顯示目前的打包進度</li>
<li class="codeRow">webpack --progress </li>
<li class="codeTitle">--watch
<li>實時監測依賴表裡面的檔案的變化，會迅速更新打包後的檔案，否則通過緩存擷取</li>
<li class="codeRow">webpack --watch / webpack -w </li>
<li class="codeTitle">--colors
<li>開啟/關閉控制台的顔色</li>
<li class="codeRow">webpack --colors(webpack5.3 好像報錯了) / webpack --color </li>
<li class="codeTitle">--profile
<li>記錄過程中編譯的性能</li>
<li class="codeRow">webpack --profile </li>
</ul>
</li>
<li>
webpack-dev-server
<li>安裝：<strong>npm i webpack-dev-server -g</strong></li>
<li>運作： <strong>webpack-dev-server(相當于 webpack )</strong></li>
<li>它将在 localhost:8080 啟動一個 express 靜态資源 web 伺服器</li>
<li>以監聽模式自動運作 webpack</li>
<li>在浏覽器打開 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ </li>
<li>可以浏覽項目中的頁面和編譯後的資源輸出</li>
<li>通過一個 socket.io 服務實時監聽它們的變化并自動重新整理頁面</li>
<li>通過package.json将常用指令制成腳本
<li>package.json中的script字段指定運作腳本指令的npm 縮寫</li>
<li>
<textarea name="code" id="" cols="60" rows="5">
"scripts": {
"w": "webpack --progress --colors --watch",
"p": "webpack -p",
"dev":"webpack-dev-server"
}
</textarea>
<li>運作<strong class="highlight">npm run w</strong>時，相當于運作<strong class="highlight">webpack --progress --colors --watch</strong>，表示運作監視模式，使用彩色字元，并顯示出打包的百分比過程</li>
<li>運作<strong class="highlight">npm run p</strong>時，相當于運作<strong class="highlight">webpack -p</strong>，表示壓縮子產品檔案</li>
<li>運作<strong class="highlight">npm run dev</strong>時，相當于運作<strong class="highlight">webpack-dev-server</strong>，表示運作本地伺服器</li>
</ul>
</body>
</html>
![一覺醒來，GPT4出來了！總結要點：-提升專業學術能力，各類考試超過90%的人類-真正的多模态，可以把紙筆畫的原型直接寫[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)