webpack入門之最簡單的例子 webpack4

時間 2019-11-16

標籤 webpack 入門最簡單例子 webpack4 简体版

原文原文鏈接

webpack在目前來講應該是前端用的比較多的打包工具了，那麼對於以前沒有接觸過這塊的該怎麼辦呢？答案很明顯嘛，看資料，查文檔，本身去琢磨，本身去敲一敲，跑一跑；javascript

那麼，這邊我將以一個最基礎的例子來將這個流程跑一邊，包括過程當中會遇到哪些問題，怎麼解決的，也會一一奉上；html

第一步：前端

咱們須要安裝npm，這個只要你有NodeJS運行環境的確定會有的；這邊這個塊也就不做敘述java

第二步：node

　　咱們接下來會選擇在項目目錄中進行全部的安裝和操做，不去選擇全局安裝；webpack

在電腦任意盤中新建一個項目文件夾，如：webpackdemoweb

接下來咱們經過cmd進入到這個項目文件夾下，並輸入執行npm init，回車，進行初始化：npm

接下來，對於package name之類的配置項，咱們徹底選擇直接回車，到底！json

到這一步，就OK了！app

此時咱們的項目文件夾裏就多了一個文件：package.json

第三步：

既然要使用webpack進行打包，那麼咱們就要來安裝webpack了，起初咱們就說過都在項目文件夾裏完成，不作全局安裝；那麼接下來輸入npm install --save-dev webpack，回車進行安裝：

此時咱們的項目文件夾，已經又多了一個文件夾和一個json文件：

第四步：

咱們如今能夠開始寫本身的項目了，那麼我這邊也就按一般各位大牛分享的例子來寫，首先，在項目文件夾下，新建兩個文件加app和public；

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

借鑑一下別人的例子：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Webpack demo</title>
</head>
<body>
    <div id='root'></div>

<!--引入打包以後的文件-->

<script src="bundle.js"></script>

</body>
</html>

　test.js

<!--寫入js,建立div元素，寫入一句話，而且導出test.js這個模塊-->
module.exports = function() {
    var test= document.createElement('div');
    test.textContent = "Hi there and testing!";
    return test;
};

　main.js

<!--導入test模塊，將內容添加到#root這個div中-->
var test= require('./test.js');
document.getElementById('root').appendChild(test());

第五步：

按道理，如今已經能夠進行打包處理了，最後的結果就是將main.js做爲主入口進行操做，最後在public文件夾中生成一個打包OK以後的文件：bundle.js；而後咱們打開index.html文件就會在頁面顯示咱們剛纔的那句話了；

可是，忽略了一個問題，那就是咱們的配置文件怎麼辦呢？都在命令行去操做嗎？這確定是很麻煩且不同意的，那麼咱們就在項目目錄下再建一個文件：webpack.congfig.js，在裏面寫入配置文件：

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

這樣咱們就能夠經過node_modules/.bin/webpack開始運行了；

問題來了：

一、報錯！

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

二、仍是不行！

還好不是原來的錯誤，那麼這個是什麼意思呢？

回看前面的截圖

倒數第二行，咱們會發現咱們安裝的webpack的版本是 4 的，那麼在4中，默認不須要配置文件（它吸取了Parcel的思想，零配置）；既然思想都不同了，是否是咱們前面這麼作就要去掉，重來，換成4的作法呢？很顯然不肯意了，畢竟作到如今了，那麼我就根據步驟一步一步的改吧；

再看這一步：

咱們順着來，輸入yes,回車，進行安裝webpack-cli

安裝完，已經自動運行了node_modules\.bin\webpack；

三、新的警告和報錯！