概述
Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析，然後將這些模塊按照指定的規則生成對應的靜態資源。
一般我們在開發中都是使用終端去進行安裝,使用npm,關於npm是什麼,在這裏就不進行詳細描述,自行搜索.在這裏只需要知道npm是一個包管理工具和它的一些基本的指令就行,如果安裝了node.js的,它裏面會自動也幫你安裝這個工具.
關於npm(node package manager)的基本指令
- 查看版本 npm -v
- 安裝npm npm install npm -g
- 指定版本安裝 npm install [email protected] -g
- 初始化(生成package.json) npm init
- 全局安裝 npm i -g
- 全局卸載 npm uninstall -g
- 全局路徑 npm root -g
- 局部安裝 npm i --save(生產環境,默認) npm i --save-dev(開發環境)
- 安裝json中記錄的模塊 npm install
- 發佈 npm publish
webpack
準備
在使用webpack之前,我們需要對其進行安裝.這裏的安裝分爲全局安裝和局部安裝.
全局安裝就是安裝在計算機全局環境中,在任意的目錄下都可以使用;
局部安裝一般就是安裝在項目的目錄下,只有在項目的根目錄下使用.
一般建議都進行全局和局部安裝.
- 全局安裝指令
// -g global全局
npm install --save-dev webpack -g //開發環境
npm install --save webpack -g //生產環境,默認
如果是4+以上的版本,不管是全局安裝還是局部安裝都需要再次安裝-cli版本
// -g global全局
npm install --save-dev webpack-cli -g //開發環境
npm install --save webpack-cli -g //生產環境,默認
指定版本
npm install webpack@<version>
- 局部安裝
局部安裝是需要在項目目錄下,執行安裝指令.
npm install --save-dev webpack //開發環境
npm install --save webpack //默認環境
3.配置文件相關
- package.json
- package-lock.json
- webpack.config.js
打包示例
簡單進行打包和配置本地服務器功能的示例.
- 準備如圖的項目文件夾和示例文件
//index.js
var box = require('./other.js')();
document.querySelector("#root").appendChild(box);
// other.js
module.exports = function(){
var box = document.createElement("div");
box.innerHTML = "hello,webpack";
return box;
};
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root">
</div>
</body>
<script src="./bundle.js"></script>
</html>
- 進行本地安裝webpack
//分別在目錄執行以下腳本
npm i --save-dev webpack
npm i --save-dev webpack-cli
安裝成功後,項目內會多出一個文件和一個文件夾
文件夾是存放包的,配置文件是各種信息.
- 創建配置文件package.json和webpack.config.js
//在package.json文件中
{
"name": "webpack_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"webpack-cli": "^3.2.3",
"webpack": "^4.29.5"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack" //加上這個,前提是已經全局安裝webpack,記得刪掉此註釋,因爲json不支持.
},
"keywords": [],
"author": "",
"license": "ISC"
}
//在webpack.config.js中
module.exports = {
entry: __dirname + "/public/index.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/main",//打包後的文件存放的地方
filename: "bundle.js"//打包後輸cl出文件的文件名
}
}
- 這個時候可以直接使用腳本命令進行打包
npm start //因爲在配置文件package.json中配置了start命令,所以可以直接使用.
- 打包結果
配置本地服務
- 這個時候也需要再安裝一個包
npm install --save-dev webpack-dev-server
- 然後在package.json和webpack.config.js需要加入一些配置
//webpack.config.js
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/public/index.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/main",//打包後的文件存放的地方
filename: "bundle.js"//打包後輸cl出文件的文件名
},
devServer: {
contentBase: "./main",//本地服務器所加載的頁面所在的目錄
historyApiFallback: true,//不跳轉
inline: true//實時刷新
}
}
// packgae.json
{
"name": "webpack_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"webpack-cli": "^3.2.3",
"webpack": "^4.29.5"
},
"devDependencies": {
"webpack-dev-server": "^3.2.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open" //加上這句,可以快捷使用腳本命令
},
"keywords": [],
"author": "",
"license": "ISC"
}
- 運行腳本
npm run server
- 成功以服務器的形式運行,你可以看到URL的前綴不再是以file協議名開頭.