webpack學習（一）：初步配置webpack
demo地址: https://github.com/Lkkkkkkg/webpack-demo
全域性安裝
npm install --global webpack // --global代表全域性安裝
本地安裝
對於大多數專案, 我們建議本地安裝, 這可以使我們在引入破壞式變更(breaking change)的依賴時, 更容易分別升級專案
npm install webpack // --global代表全域性安裝
開始搭建
先建立一個目錄 demo01 , 初始化 npm , 再本地安裝 webpack 和 webpack-cli (如果使用 webpack 4+ 版本, 你還需要安裝 webpack-cli , webpack-cli 是用於在命令列中執行 webpack )
mkdir demo01 //建立一個目錄demo01
cd demo01 //進入demo01
npm -init -y //初始化npm, -y代表引數全部預設
npm install webpack webpack-cli --save-dev //這裡本地安裝webpack和webpack-cli, --save-dev代表儲存在package.json檔案裡
配置 webpack 目錄結構
接下來將建立一個如下的檔案目錄
|- /dist //用於放打包後文件的資料夾
|- bundle.js //出口檔案
|- index.html //模板檔案
|- /node_modules
|- /src //用於放原始檔的資料夾 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-demo01</title>
</head>
<body>
<script src="bundle.js"></script> //引用出口檔案, 因為bundle.js是webpack打包出來的檔案
</ index.js
import _ from 'lodash';
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' '); //要用到lodash的語法
return element;
}
document.body.appendChild(component());
要在 index.js 中打包 lodash 依賴, 我們需要在本地安裝 lodash:
npm install --save lodash
使用 webpack 配置檔案
webpack.config.js
const path = require('path'); //node自帶的path模組
module.exports = {
entry: './src/index.js', //入口檔案配置
output: { //出口檔案配置
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
使用 webpack-cli 在命令列中執行 webpack
使用 webpack 命令打包, 如果是全域性安裝了webpack, 直接在終端輸入webpack, 如果是本地則需要加上字首目錄 ./node_modules/.bin/webpack , 如果是 Node 8.2+ 版本, 可以輸入 npx webpack, Node 8.2+ 提供的 npx 命令，可以執行在初始安裝的 webpack 包(package)的 webpack 二進位制檔案(./node_modules/.bin/webpack)
webpack// 全域性安裝的情況下
./node_modules/.bin/webpack //區域性安裝的情況下
npx webpack // Node 8.2+
開啟index.html
webpack打包成功, 這裡index.html引用的是bundle.js, 而js程式碼寫在index.js裡, 說明webpack將入口檔案的js打包輸出到了bundle.js, index.html可以引用到裡面的js, 輸出了來自index.js的內容
使用NPM指令碼代替 webpack-cli 命令
考慮到用 CLI 這種方式來執行本地的 webpack 不是特別方便(也就是在命令列輸入npx webpack), 我們可以設定一個快捷方式, 在 package.json 新增一個 npm 指令碼(npm script):
package.json
{
"name": "demo05",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //在這一行新增這個欄位
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"lodash": "^4.17.11"
}
}
現在，可以使用 npm run build 命令，來替代我們之前使用的 npx 命令, 意思就是npm幫忙執行webpack, npm會在自動在webpack加上目錄字首, 也就說相當於在命令列輸入./node_modules/.bin/webpack
npm run build //相當於./node_modules/.bin/webpack