Webpack，小白入門，包教不包會。

時間 2019-11-09

標籤 webpack 入門包教简体版

原文原文鏈接

本篇寫於2019.10.21，當前webpack的版本爲4.X.X。目的是在於可以將小白入門，而且本身會搭建webpack的相關插件以及一些其餘的loader之類的。好了，話很少說，咱們開始寫吧！

什麼是Webpack，以及咱們爲何要用他。

現今的不少網頁其實能夠看作是功能豐富的應用，它們擁有着複雜的JavaScript代碼和一大堆依賴包。爲了簡化開發的複雜度，前端社區涌現出了不少好的實踐方法css

模塊化，讓咱們能夠把複雜的程序細化爲小的文件;
相似於TypeScript這種在JavaScript基礎上拓展的開發語言：使咱們可以實現目前版本的JavaScript不能直接使用的特性，而且以後還能轉換爲JavaScript文件使瀏覽器能夠識別；
Scss，less等CSS預處理器

WebPack和Grunt以及Gulp相比有什麼特性

借用兩張圖表示的話就是。
gulp：
html

gulp是在一個配置文件中，指明對某些文件進行相似編譯，組合，壓縮等任務的具體步驟，工具以後能夠自動替你完成這些任務

webpack：
前端

webpack是把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。

開始使用webpack

// 先全局安裝webpack
npm install -g webpack

如今，咱們新建一個文件夾vue

// 使用npm init
npm init
// init是建立package.json用的，建立的時候叫你填寫一些信息，
// 不用管它，對於如今的咱們來講先不用瞭解，而後咱們一路回車。

// 安裝局部webpack
npm install --save-dev webpack

咱們如今在package.json文件所在的文件夾裏面建立兩個文件夾app和public.
此時，咱們的項目結構以下圖所示。
node

如今叫咱們在app文件夾裏面建立main.js
在public文件裏面建立index.htmlwebpack

如今，咱們的項目目錄結構是這樣的：

咱們如今要學會第一次打包，先配置webpack配置文件。
在當前目錄下，新建一個webpack.config.js的配置文件
文件裏面內容爲web

// webpack.config.js
module.exports = {
  entry:  __dirname + "/app/main.js",//已屢次說起的惟一入口文件
  output: {
    path: __dirname + "/public",//打包後的文件存放的地方
    filename: "bundle.js"//打包後輸出文件的文件名
  }
}

如今將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>
  <script src="bundle.js"></script>
  <script>
  </script>
</body>
</html>

看到index.html上有一個id爲root的dom元素，還有一個script標籤，裏面指向內容爲bundle.js
如今還不理解上面的東西，不要緊。接着往下看。
先在app/main.js 裏面寫上一段代碼npm

document.getElementById('root').innerText = 'webpack好好玩，我好喜歡玩這個啊！'

在package.json裏面寫上json

{
  "name": "sfwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"  // 修改這裏，json文件不支持註釋，複製完成請刪除
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  }
}

npm的 start命令是一個特殊的腳本名稱，其特殊性表如今，在命令行中使用npm start就能夠執行其對於的命令，若是對應的此腳本名稱不是start，想要在命令行中運行時，須要這樣用 npm run {script name}如 npm run build，咱們在命令行中輸入 npm start試試，

能夠看到，咱們已經打包成功了！將main.js變爲了bundle.js而且將他輸出到了public的文件夾下。
到此爲止，咱們已經知道了在剛纔的index.html文件裏面bundle.js和id爲root的dom元素是幹什麼了吧？
咱們如今打開public文件夾下的index.html文件,可以看到頁面上顯示的是webpack好好玩，我好喜歡玩這個啊！
如今，先別急着往下走。咱們先來看看控制檯的提示

它對咱們警告，須要配置mode，這裏先不用管它，咱們後面會講這一點，這也是webpack4新加的一個功能。

你如今已經成功的打包了一個webpack文件，這會是一個良好的開始！！！

如今，咱們還必須手動刷新網頁，每次更改後都會按下F5，使得調試極其不容易，因此咱們如今想要代碼一更新就會自動加載。

// 安裝webpack-dev-server
npm install --save-dev webpack-dev-server

這個webpack-dev-server是基於node.js構建的一個本地服務器，簡單來講就是可以讓你不刷新的狀況下，看到更改後的內容
devserver做爲webpack配置選項中的一項，如下是它的一些配置選項，更多配置請參考官網，這裏給出一些配置信息

devserver的配置選項	功能描述
contentBase	默認webpack-dev-server會爲根文件夾提供本地服務器，若是想爲另一個目錄下的文件提供本地服務器，應該在這裏設置其所在目錄（本例設置到「public"目錄）
port	設置默認監聽端口，若是省略，默認爲」8080「
inline	設置爲true，當源文件改變時會自動刷新頁面

把下面的命令假如到webpack.config.js文件裏面

module.exports = {
    entry:  __dirname + "/app/main.js",//已屢次說起的惟一入口文件
    output: {
      path: __dirname + "/public",//打包後的文件存放的地方
      filename: "bundle.js"//打包後輸出文件的文件名
    },
    devServer: {
        contentBase: "./public",//本地服務器所加載的頁面所在的目錄
        historyApiFallback: true,//不跳轉
        inline: true//實時刷新
      },
  }

將下面的命令加入到package.json文件中

"server":  "webpack-dev-server --open"

咱們運行 npm run server就能夠看到，瀏覽器自動打開一個頁面，咱們修改main.js裏的文件內容

// main.js
document.getElementById('root').innerText = '我好喜歡玩這個啊！'

可以看到瀏覽器自動刷新，不須要咱們手動修改它了。

Loaders

loaders是webpack的核心功能了，它的主要做用是將ES6轉換爲瀏覽器識別的ES5或者說將LESS/SCSS編譯爲CSS等等。好了，咱們看看如何使用loaders了。

test：一個用以匹配loaders所處理文件的拓展名的正則表達式（必須）
loader：loader的名稱（必須）
include/exclude ：手動添加必須處理的文件（文件夾）或屏蔽不須要處理的文件（文件夾）（可選）；

// 安裝vue
npm install vue

未完待續。。。。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。