1.webpack使用組態檔打包
我們前面講的webpack打包命令webpack 待打包的檔案 打包后的檔案是以引數的形式來指定打包的入口檔案和出口檔案，這種方式不夠靈活，在專案中我們更常用的方法是：將打包的相關資訊寫在組態檔中，
webpack的組態檔為：webpack.config.js檔案，
（1）基本實作使用組態檔打包
還是以前面的案例來進行講解：
新建webpack.config.js檔案如下：
module.exports = {
entry: './src/main.js', //打包的入口檔案，即需要打包的檔案
output: {
//path為打包的出口檔案目錄，必須為絕對路徑
path: 'C:\\Users\\Administrator.DESKTOP-7PKNCLF\\Documents\\HBuilderProjects\\test002\\test_webpack\\dist',
//filename為打包的出口檔案名
filename: 'build.js'
}
}
在終端執行webpack打包命令：webpack
注意：如果你的webpack組態檔名不是webpack.config.js，那么執行webpack進行打包時，需要指定組態檔，
webpack xxx.js(組態檔)
（2）動態獲取組態檔中出口目錄路徑
因為我們的webpack組態檔中的出口目錄路徑需要為絕對路徑，如果我們寫死在組態檔中，可能導致該專案部署到不同的服務器時絕對路徑不生效的問題，所以我們需要動態的獲取組態檔中出口目錄路徑，
第一步：在專案中初始化npm，
因為我們動態獲取路徑需要使用npm中的內置模塊path，所以我們需要在專案中初始化npm，
# 進入專案路徑執行以下命令
npm init
執行該命令時，需要我們確定很多選擇項：
- packahe name: 專案名稱（一般使用默認的，回車即可）
- version：版本號（使用默認的，回車即可）
- description：專案描述（不需要回車即可）
- entry point：專案入口檔案（默認為webpack.config.js）
- test command：專案啟動時要執行的命令（默認即可）
- git repository：git地址（如果專案需要配置git就填寫，不需要回車即可）
- keywords：關鍵字（不知道啥作用，回車即可）
- author：發布的作者
- license：發布專案的證書（不設定就回車）
初始化npm后，會在專案目錄下生成package.json檔案，其內記錄了專案相關的資訊（就是我們初始化npm時的選擇項）
第二步：在組態檔中動態獲取出口檔案路徑
修改webpack.config.js檔案如下：
let path = require('path') //匯入path模塊
module.exports = {
entry: './src/main.js',
output: {
// 動態獲取路徑，path.resolve（）函式是將兩個路徑拼接在一起
// __dirname是獲取當前檔案的絕對路徑
path: path.resolve(__dirname,'dist'),
filename: 'build.js'
}
}
在執行命令webpack
（3）將webpack打包命令映射為npm命令
我們在實際開發中往往并不會直接使用webpack命令進行打包，而是需要將webpack相關的打包命令映射為npm命令來進行管理，
在package.json檔案中，映射webpack命令到npm為自定義命令，
{
"name": "test_webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //將命令`webpack`映射為npm的自定義命令`build`
},
"author": "",
"license": "ISC"
}
然后執行命令：npm run build本質就相當于執行webpack，
（4）使用專案區域的webpack
- 我們知道webpack是npm的一個第三方模塊，它有許多不同的版本，那么會產生一個問題：如果我們有多個專案都需要使用webpack，且它們的版本不一樣，那么如果都使用我們全域的webpack就會導致有些專案因為webpack的版本不一樣，從而產生各種問題，
- 所以我們就需要給每一個專案安裝專案區域的webpack
安裝方法：進入專案目錄終端，執行命令npm install webpack@3.6.0 --save-dev
在安裝完成后，在專案package.json檔案會生成以下資訊
這樣我們在執行npm run build時，使用的就是專案區域的webpack了，而不是全域的webpack，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/287620.html
標籤：其他
上一篇：【JavaScript】基礎語法