2019年3月25日更新,目前 webpack 版本爲4.29.6 。本文根據 webpack 中文文檔,謹以此記錄實操過程,以及遇到的一些疑點難點。如有經驗,最好的方法當然是直接閱讀 官方文檔,跟着碼一遍。
前言
webpack核心作用
其實這個官網也用了一張圖來解釋:
專業解釋也有:
WebPack可以看做是模塊打包機:它做的事情是,分析你的項目結構,找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言(Scss,TypeScript等),並將其打包爲合適的格式以供瀏覽器使用。
簡單理解就是簡化開發的複雜度、提高開發效率的工具,會用好處多多O(∩_∩)O?
本地安裝
不推薦全局安裝 webpack。這會將你項目中的 webpack 鎖定到指定版本,並且在使用不同的 webpack 版本的項目中,可能會導致構建失敗。
一、安裝
1.在本地創建一個新的項目目錄 webpack-demo ,打開它
2.使用 cnpm init -y 創建package.json文件
3.使用 cnpm i --save-dev webpack webpack-cli 局部安裝最新版 webpack
4.執行 node_modules/.bin/webpack -v 檢查webpack是否安裝成功
5.創建以下兩個文件夾(dist、src)以及 index.html 、 index.js 文件,並安裝 loadsh 依賴
cnpm install --save lodash
文件夾 | 作用 |
---|---|
dist | 存放我們編寫的各種本地文件 |
src | 存放webpack打包後的數據 |
src/index.js
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
dist/index.html
<!doctype html>
<html>
<head>
<title>起步</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
6.這之後運行 npx webpack
可以看到編譯成功了:
此時打開 index.html ,訪問正常如下:
二、使用配置文件以及腳本
在 webpack 4 中,可以無須任何配置使用,然而大多數項目會需要很複雜的設置,這就是爲什麼 webpack 仍然要支持 配置文件。這比在終端(terminal)中手動輸入大量命令要高效的多。
1.創建一個取代以上使用 CLI 選項方式的配置文件:
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
2.在 package.json 添加一個 npm 腳本(npm script):
現在,可以使用 npm run build 命令,來替代之前使用的 npx 命令:
打開 index.html :
這裏的問題我覺得主要是引用與輸出文件名稱不一致導致的
將 index.html 的導入文件改爲 bundle.js 即可
結論
現在,按照文檔已經實現了一個基本的構建過程,官網的中文文檔已經是十分詳細的了,這裏照着碼了一遍,過程中遇到了一些細節問題,不過問題不大,細心即可解決?