簡單使用 -- webpack · 前端工程化學習筆記

>[success] # 初次使用webpack 1. webpack的安裝目前分為兩個：**webpack、webpack-cli**, * **webpack 是 Webpack 的核心模塊** * **webpack-cli 是 Webpack 的 CLI 程序**，用來在**命令行中調用 Webpack** 2. 執行**webpack**命令，會執行**node_modules下的.bin目錄下的webpack**,**webpack**在執行時是依賴**webpack-cli**的，如果沒有安裝就**會報錯**,**webpack-cli中代碼執行時**，才是真正利用**webpack進行編譯和打包的過程** 3. 安裝指令 ~~~ bash npm install webpack webpack-cli –g # 全局安裝 npm install webpack webpack-cli –D # 局部安裝 ~~~ * 注當然你在使用**webpack-cli 所提供的 CLI'提供的一些指令時候可以通過npx** >[danger] ##### 簡單的使用步驟 1. 首先在我們要創建項目的文件下創建一個`package.json` -- 指令 `npm init -y` 2. 執行安裝 `webpack` 指令 ~~~ bash npm install webpack webpack-cli –g # 全局安裝 npm install webpack webpack-cli –D # 局部安裝 ~~~ 3. 安裝后想查看版本 * 在 `windows` 環境下想查看 `webpack `版本使用 `.\node_modules\.bin\webpack -v` * 在 `linux `環境下想查看 `webpack `版本使用 `./node_modules/.bin/webpack -v` * 最簡單的辦法指令 `npx webpack --version` 或者 `npx webpack -v` 4. 創建一個 `webpack` 的配置文件，默認配置文件是當前文件下的-- `webpack.config.js`,想自定義指定配置文件的目錄使用 `npx webpack --config 指定目錄` 或者` .\node_modules\.bin\webpack webpack --config 指定目錄` 5. 當然所有指令也可以配置在 `package.json`中 `scripts ` 配置指令（`.\node_modules\.bin執行對應的配`） ~~~ "scripts": { "build": "webpack" // "build": "webpack --config 指定目錄" } ~~~ 現在可以通過該`npm run build` 來執行webpack >[info] ## 快速使用案例 1. **webpack 支持零配置**，也就是不用去配置提供的配置文件，**webpack 會按照自身內置默認條件進行打包**，也就是不用去創建`webpack.config.js` 文件webpack 也可以快速按照默認配置去完成一個項目打包 2. webpack默認打包**入口文件是./src/index.js**,打包后的**生成文件地址是./dist/main.js** >[danger] ##### 案例 1. 下面文件結構目錄就將兩個 **esm** 文件變成了一個，因此最后可以**減少文件請求** * 項目結構目錄說明 ~~~ ├── 'dist' // 運行后生成的不是手動創建的 │ ├── 'main.js' // 運行后生成的不是手動創建的 │ ├── 'index.html' // 手動添加 ├── 'node_modules' // npm下載包都在這個文件夾 ├── 'src' // 整個工程文件目錄 │ ├── 'hellowWebpack.js' // 寫邏輯的地方 │ ├── 'index.js' // 打包的入口 ├── 'package.json' └── 'package-lock.json' // 鎖版本包 ~~~ * hellowWebpack.js ~~~ document.write('webpack1') ~~~ * index.js ~~~ import './hellowWebpack' ~~~ * dist/index.html ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>  <script src="./main.js"></script> </head> <body> </body> </html> ~~~