1、安裝
先裝好node和npm,因爲webpack是一個基於node的項目。然後npm install -g webpack
全局安裝
官方不建議全局安裝webpack,所以還要進行本地安裝
2、進入項目文件夾,比如webpack_demo,然後新建一個package.json的文件在項目根目錄下
npm init //詢問一些問題:按回車選擇默認值 自動生成文件package.json
npm install --save-dev webpack //本地安裝,
目前是開發環境,所以需要加上-dev,用戶運行不需要依賴這個包
如果用戶運行需要依賴這個包,那麼就不加-dev,直接是--save,保存到生產環境
至此,webpack安裝完成
3、在項目根目錄下,建立
src源代碼文件夾——開發環境
dist生產環境文件夾
- ./是當前目錄
- ../是父級目錄
- /是根目錄
3、在命令行中分別執行以下命令,安裝對應的插件(--save-dev作用是安裝的插件的同時,將插件名寫入package.json的devDependencies列表中)
npm install webpack --save-dev
npm install jquery --save-dev
npm install style-loader css-loader --save-dev
npm install extract-text-webpack-plugin –-save-dev
4、webpack ./src/entery.js -o dist/bundle.js --mode development 在終端(命令行)中使用webpack打包
下面介紹使用配置文件進行打包
5、創建webpack.config.js
module.exports={
//入口文件的配置項
entry:{},
//出口文件的配置項
output:{},
//模塊:例如解讀CSS,圖片如何轉換,壓縮
module:{},
//插件,用於生產模版和各項功能
plugins:[],
//配置webpack開發服務功能
devServer:{}
}
- entry:配置入口文件的地址,可以是單一入口,也可以是多入口。
- output:配置出口文件的地址,在webpack2.X版本後,支持多出口配置。
- module:配置模塊,主要是解析CSS和圖片轉換壓縮等功能。
- plugins:配置插件,根據你的需要配置不同功能的插件。
- devServer:配置開發服務功能,後期我們會詳細講解。
- [name]的意思是根據入口文件的名稱,打包成相同的名稱,有幾個入口文件,就可以打包出幾個文件
配置文件參數說明:
- entry: 是 頁面入口文件配置 (html文件引入唯一的js 文件)
- output:對應輸出項配置
- path :入口文件最終要輸出到哪裏,
- filename:輸出文件的名稱
-
publicPath:公共資源路徑
- webpack:普通打包
- webpack -p:壓縮打包
- webpack -p -w:監聽所有需要打包的代碼,只要有代碼被改動並保存後,就會自動進行打包
6、熱更新
a.配置devServer
devServer:{
contentBase:path.resolve(__dirname,'dist') //基本目錄結構,監聽哪裏的代碼
host:'10.1.28.102', //ip地址,不建議填localhost 命令行ipconfig查看ipv4的值即是ip地址
compress:true, //服務器壓縮參數,是否啓用服務器壓縮,一般啓用
port:1717 //任何喜歡的數字
}
b.安裝服務:npm install webpack-dev-server --save-dev
6、live-server
本地開發常常需要搭建臨時的服務,第一時間我們會想到用http-server。
但現在流行修改文件瀏覽器自動刷新hot socketing(熱拔插),如live-reload。
若想瀏覽器自動打開項目,用opener。
現在live-server實現了三個插件的所有功能,並且很簡單就能啓動一個看起來很專業的本地服務
- 初始化npm:npm init
- 安裝live-server:cnpm install -g live-server
- 啓動live-server:live-server
如果你比較懶,可以在package.json中增加start中增加新的腳本
"scripts": {
"server": "live-server ./ --port=9090"
}
然後執行 npm run server
瀏覽器會自動打開,並且當你修改本地文件,瀏覽器都會立即同步
7、const path = require('path');
path.resolve(__dirname,'dist'); //dist目錄所在的絕對路徑