快捷導(dǎo)航

webpack4 入門(mén)最簡(jiǎn)單的例子介紹

更新時(shí)間：2018年09月05日 14:51:10 作者：神仙哥哥灬

這篇文章主要介紹了webpack4 入門(mén)最簡(jiǎn)單的例子介紹，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

webpack在目前來(lái)說(shuō)應(yīng)該是前端用的比較多的打包工具了，那么對(duì)于之前沒(méi)有接觸過(guò)這塊的該怎么辦呢？答案很明顯嘛，看資料，查文檔，自己去琢磨，自己去敲一敲，跑一跑；

Webpack是當(dāng)下最熱門(mén)的前端資源模塊化管理和打包工具，它可以將很多松散的模塊按照依賴(lài)和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源，還可以將按需加載的模塊進(jìn)行代碼分割，等到實(shí)際需要的時(shí)候再異步加載。

webpack和Grunt以及Gulp相比有什么特性

Gulp/Grunt是一種能夠優(yōu)化前端的開(kāi)發(fā)流程的工具，而WebPack是一種模塊化的解決方案，不過(guò)Webpack的優(yōu)點(diǎn)使得Webpack可以替代Gulp/Grunt類(lèi)的工具。

Grunt和Gulp的工作方式是：在一個(gè)配置文件中，指明對(duì)某些文件進(jìn)行類(lèi)似編譯、組合、壓縮等任務(wù)的具體步驟。

webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體，通過(guò)一個(gè)給定的主文件（如：index.js），Webpack將從這個(gè)文件開(kāi)始找到你的項(xiàng)目的所有依賴(lài)文件，使用loaders處理它們，最后打包為一個(gè)瀏覽器可識(shí)別的JavaScript文件。

那么，這邊我將以一個(gè)最基礎(chǔ)的例子來(lái)將這個(gè)流程跑一邊，包括過(guò)程中會(huì)遇到哪些問(wèn)題，怎么解決的，也會(huì)一一奉上；

第一步：

我們需要安裝npm，這個(gè)只要你有NodeJS運(yùn)行環(huán)境的肯定會(huì)有的；這邊這個(gè)塊也就不作敘述

第二步：

我們接下來(lái)會(huì)選擇在項(xiàng)目目錄中進(jìn)行所有的安裝和操作，不去選擇全局安裝；

在電腦任意盤(pán)中新建一個(gè)項(xiàng)目文件夾，如：webpackdemo

接下來(lái)我們通過(guò)cmd進(jìn)入到這個(gè)項(xiàng)目文件夾下，并輸入執(zhí)行npm init，回車(chē)，進(jìn)行初始化：

接下來(lái)，對(duì)于package name之類(lèi)的配置項(xiàng)，我們完全選擇直接回車(chē)，到底！

到這一步，就OK了！

此時(shí)我們的項(xiàng)目文件夾里就多了一個(gè)文件：package.json

第三步：

既然要使用webpack進(jìn)行打包，那么我們就要來(lái)安裝webpack了，起初我們就說(shuō)過(guò)都在項(xiàng)目文件夾里完成，不做全局安裝；那么接下來(lái)輸入npm install --save-dev webpack，回車(chē)進(jìn)行安裝：

此時(shí)我們的項(xiàng)目文件夾，已經(jīng)又多了一個(gè)文件夾和一個(gè)json文件：

第四步：

我們現(xiàn)在可以開(kāi)始寫(xiě)自己的項(xiàng)目了，那么我這邊也就按通常各位大牛分享的例子來(lái)寫(xiě)，首先，在項(xiàng)目文件夾下，新建兩個(gè)文件加app和public；

app文件夾中寫(xiě)入test.js和main.js；public文件夾中寫(xiě)入index.html；

借鑒一下別人的例子：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Webpack demo</title>
</head>
<body>
 <div id='root'></div><br><br> 
<!--引入打包之后的文件-->
<script src="bundle.js"></script> 
</body>
</html>

test.js

<!--寫(xiě)入js,創(chuàng)建div元素，寫(xiě)入一句話，并且導(dǎo)出test.js這個(gè)模塊--><br>module.exports = function() {

 var test= document.createElement('div');

 test.textContent = "Hi there and testing!";

 return test;

};

main.js

<!--導(dǎo)入test模塊，將內(nèi)容添加到#root這個(gè)div中--><br>var test= require('./test.js');

document.getElementById('root').appendChild(test());

第五步：

按道理，現(xiàn)在已經(jīng)可以進(jìn)行打包處理了，最后的結(jié)果就是將main.js作為主入口進(jìn)行操作，最后在public文件夾中生成一個(gè)打包OK之后的文件：bundle.js；然后我們打開(kāi)index.html文件就會(huì)在頁(yè)面顯示我們剛才的那句話了；

但是，忽略了一個(gè)問(wèn)題，那就是我們的配置文件怎么辦呢？都在命令行去操作嗎？這肯定是很麻煩且不贊成的，那么我們就在項(xiàng)目目錄下再建一個(gè)文件：webpack.congfig.js，在里面寫(xiě)入配置文件：

module.exports = {
 entry: __dirname + "/app/main.js",//入口文件
 output: {
 path: __dirname + "/public",//打包后的文件存放目錄
 filename: "bundle.js"http://打包后輸出文件的文件名
 }
}

這樣我們就可以通過(guò)node_modules/.bin/webpack開(kāi)始運(yùn)行了；

問(wèn)題來(lái)了：

1、報(bào)錯(cuò)！

解決方式：node_modules\.bin\webpack "/"改成"\"

2、還是不行！

還好不是原來(lái)的錯(cuò)誤，那么這個(gè)是什么意思呢？

回看前面的截圖

倒數(shù)第二行，我們會(huì)發(fā)現(xiàn)我們安裝的webpack的版本是 4 的，那么在4中，默認(rèn)不需要配置文件（它吸收了Parcel的思想，零配置）；既然思想都不一樣了，是不是我們前面這么做就要去掉，重來(lái)，換成4的做法呢？很顯然不愿意了，畢竟做到現(xiàn)在了，那么我就根據(jù)步驟一步一步的改吧；

再看這一步：