webpack安裝與基本配置(一)
阿新 • • 發佈:2018-11-05
webpack安裝與基本配置(一)
1.假設你已經有了一個需要打包的專案,那麼我們開始以下操作
2.在src目錄下新建一個webpack的配置檔案叫做webpack.config.js
- 說明:
-
這個檔名可以修改,但是跟配置webpack執行的屬性值直接相關,否則會報錯
- 專案結構:
3.配置 webpack.config.js 檔案
程式碼如下
const path = require('path');
module. exports = {
entry:"./src/main.js", //即專案入口檔案的路徑,
output:{ //a.生成的新的js檔案會存在在哪個位置
path: path.resolve(__dirname,'dist') , //這裡需要一個絕對路徑,因此引用了path這個模組 __dirname代表專案的總目錄(src的上級目錄),dist是檔案匯出後所要存在的資料夾名
filename:"main.js" //b.生成的新的js檔案叫什麼名字
}
};
//module.exports是node.js的語法 ,這裡就是webpack的配置 比如webpack會以書面方式來打包,打包的過程中它會做一些什麼事情
//在這個匯出物件中,至少需要設定兩個屬性:
// entry: 這個就是我們整個專案的入口,找到入口檔案之後他會打包出一份新的檔案,所以還需要設定一個關於出口檔案(output)的屬性
3.安裝wepack
1. 初始化 package.js檔案 命令:npm init -y ====>執行之後,再src下會自動新建一個package.jison的檔案;
2. 安裝專案開發所需要的相關依賴 命令 : npm i -D webpack ====>執行之後,跟src同級會自動生成一個node_modulesd的檔案,在src下會自動生成一個package-lock.json;
3. webpack 4.0以及之後的版本還需要安裝 webpack-cli(目前3相對比較穩定,3不需要安裝這些) 命令: npm i -D webpack-cli
4. 在webpack.config.js檔案的module.export中配置生成環境和開發環境的相關屬性(4.0以上的版本)
5. mode:" development " ( development:開發環境 production:生產環境)
4. 配置webpack執行命令
在package.js檔案中找到script屬性,新增 “dev”: “webpack”
這塊預設執行webpack.config.js這個檔案,配置好之後,就可以直接用命令列運行了 命令:npm run dev
執行之後,在我們設定的dist(執行webpack之後,新生成檔案所存放的資料夾)檔案下,就可以看到我們打包好新生成的js檔案了