前端工程化之3分鐘講清楚最經典的前端打包工具webpack基礎

概念

Webpack 是一種前端資源構建工具，一個靜態模塊打包器。一個前端項目中包含了不少資源，可是瀏覽器並不必定所有認識，好比sass、less、ts，包括js裏的高級語法。這些資源若是想在瀏覽器中正常工做，必須通過編譯處理。而咱們的Webpack就是能夠集成的處理這些文件，而且彙總到一個文件中。html

Webpack核心基礎

entry

入口（entry）：表明着 Webpack 以那個文件爲入口起點開始打包，分析構建內部依賴圖。默認值是 ./src/index.js，但你也能夠經過配置 entry 屬性，來指定一個（或多個）不一樣的入口起點。前端

module.exports = {
  entry: './path/to/my/entry/file.js'
};
複製代碼

output

輸出（output）: 指示 Webpack 打包後到資源 bundles 輸出到哪裏，以及如何命名。主要輸出文件的默認值是 ./dist/main.js，其餘生成文件默認放置在 ./dist 文件夾中。webpack

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};
複製代碼

Loader

Loader：Webpack 自身只能理解 JavaScript 和 json 文件，loader 讓 Webpack 可以處理其餘文件。web

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /.txt$/, use: 'raw-loader' }
    ]
  }
};
複製代碼

plugin

插件（plugins）：能夠用於執行範圍更廣的任務。從打包優化和壓縮，一直到從新定義環境中的變量等。npm

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 經過 npm 安裝
const webpack = require('webpack'); // 用於訪問內置插件

module.exports = {
  module: {
    rules: [
      { test: /.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
複製代碼

mode

模式（mode）:指示 Webpack使用相應模式的配置。默認爲production。json

module.exports = {
  mode: 'production'
};
複製代碼

實踐一下

瞭解完核心基礎後，如今能夠嘗試着去試一試完成一個Demo瀏覽器

首先先建立一個文件夾叫作」 Webpack 初體驗「，而後在其下建立一個src文件夾，如圖所示sass

而後輸入指令 npm init 進行項目初始化，而且安裝 webpack 包markdown

配置好環境就能夠開始這個Demo了less

首先咱們在 src 目錄下建立如下幾個文件，爲後面打包作好準備。

data.json文件

{
  "name": "Andy",
  "age": 18
}
複製代碼

Index.js 文件

/*
  index.js: webpack入口起點文件

  1.運行指令：
    開發環境：webpack ./src/index.js -o ./build/built.js --mode=development
      webpack會以 ./src/index.js 爲入口文件開始打包，打包後輸出到 ./build/built.js
      總體打包環境，是開發環境

    生產環境：webpack ./src/index.js -o ./build/built.js --mode=production
      webpack會以 ./src/index.js 爲入口文件開始打包，打包後輸出到 ./build/built.js
      總體打包環境，是生產環境
  */
import data from './data.json'
console.log(data)

function add(x, y) {
  return x + y;
}

console.log(add(1, 2))
複製代碼

而後輸入打包指令，在這裏加一點小內容，mode中分爲開發環境和生產環境。他們最終打包的內容體積大小都是不同的。最終咱們能拿到built.js文件，以下圖所示

這就是打包後的文件內容

Look LooK，這就是咱們最終把js文件以及json打包後的樣子，而後建立一個index.html文件，在index.html文件中引入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="../build/built.js"></script>
</body>
</html>
複製代碼

最終，就能夠在瀏覽器中順利的運行這個html文件