webpack摸爬滾打（一）

整理自官網(wǎng)指南

版本：webpack 4.*

安裝

npm install --save-dev webpack
npm install --save-dev webpack-cli

起步(基本構(gòu)建過程)

新建工程
npm install webpack webpack-cli --save-dev
npm init -y
webpack前

  • index.html
<!doctype html>
<html>
  <head>
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>
  • src/index.js
function component() {
  var element = document.createElement('div');

  // Lodash（目前通過一個 script 腳本引入）對于執(zhí)行這一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());
  • 缺點
    • 無法立即體現(xiàn)，腳本的執(zhí)行依賴于外部擴展庫(external library)。
    • 如果依賴不存在，或者引入順序錯誤，應(yīng)用程序?qū)o法正常運行。
    • 如果依賴被引入但是并沒有使用，瀏覽器將被迫下載無用代碼。

使用webpack構(gòu)建

  • npm install --save lodash
  • webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
  • src/index.js
 import _ from 'lodash';
...

index.js 顯式要求引入的 lodash 必須存在，然后將它綁定為 _（沒有全局作用域污染）。通過聲明模塊所需的依賴，webpack 能夠利用這些信息去構(gòu)建依賴圖，然后使用圖生成一個優(yōu)化過的，會以正確順序執(zhí)行的 bundle。

  • 目錄結(jié)構(gòu)
webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

將“源”代碼(/src)從我們的“分發(fā)”代碼(/dist)中分離出來。“源”代碼是用于書寫和編輯的代碼?！胺职l(fā)”代碼是構(gòu)建過程產(chǎn)生的代碼最小化和優(yōu)化后的“輸出”目錄，最終將在瀏覽器中加載

管理資源

webpack ，將動態(tài)打包(dynamically bundle)所有依賴項（創(chuàng)建所謂的依賴圖(dependency graph)）。這是極好的創(chuàng)舉，因為現(xiàn)在每個模塊都可以_明確表述它自身的依賴，我們將避免打包未使用的模塊。

除了 JavaScript，還可以通過 loader 引入任何其他類型的文件

加載CSS

npm install --save-dev style-loader css-loader
webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }
  };

在項目中添加一個新的 style.css 文件，并將其導(dǎo)入到我們的 index.js
src/index.js

  import _ from 'lodash';
+ import './style.css';

  function component() {
    var element = document.createElement('div');

    // lodash 是由當前 script 腳本 import 導(dǎo)入進來的
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+   element.classList.add('hello');

    return element;
  }

  document.body.appendChild(component());

npm run build

以這種方式加載資源，可以以更直觀的方式將模塊和資源組合。無需依賴于含有全部資源的 /assets 目錄，而是將資源與代碼組合在一起。例如，類似這樣的結(jié)構(gòu)會非常有用：

- |- /assets
+ |– /components
+ |  |– /my-component
+ |  |  |– index.jsx
+ |  |  |– index.css
+ |  |  |– icon.svg
+ |  |  |– img.png

這種配置方式會使你的代碼更具備可移植性

管理輸出

增加一個js文件print.js

  • 目錄結(jié)構(gòu)
webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
  |- /src
    |- index.js
+   |- print.js
  |- /node_modules
  • src/print.js
export default function printMe() {
  console.log('I get called from print.js!');
}
  • src/index.js
  import _ from 'lodash';
+ import printMe from './print.js';

  function component() {
    var element = document.createElement('div');
+   var btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

+   btn.innerHTML = 'Click me and check the console!';
+   btn.onclick = printMe;
+
+   element.appendChild(btn);

    return element;
  }

  document.body.appendChild(component());
  • dist/index.html
<!doctype html>
  <html>
    <head>
-     <title>Asset Management</title>
+     <title>Output Management</title>
+     <script src="./print.bundle.js"></script>
    </head>
    <body>
-     <script src="./bundle.js"></script>
+     <script src="./app.bundle.js"></script>
    </body>
  </html>
  • webpack.config.js
 const path = require('path');

  module.exports = {
-   entry: './src/index.js',
+   entry: {
+     app: './src/index.js',
+     print: './src/print.js'
+   },
    output: {
-     filename: 'bundle.js',
+     filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

到目前為止，我們在 index.html 文件中手動引入所有資源，然而隨著應(yīng)用程序增長，并且一旦開始對文件名使用哈希(hash)]并輸出多個 bundle，手動地對 index.html 文件進行管理，一切就會變得困難起來。然而，可以通過一些插件，會使這個過程更容易操控。

HtmlWebpackPlugin
  • npm install --save-dev html-webpack-plugin
  • webpack.config.js
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Output Management'
+     })
+   ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

HtmlWebpackPlugin 還是會默認生成 index.html 文件。這就是說，它會用新生成的 index.html 文件，把我們的原來的替換, 所有的 bundle 會自動添加到 html 中。

clean-webpack-plugin:清理 /dist 文件夾

通常，在每次構(gòu)建前清理 /dist 文件夾，是比較推薦的做法，因此只會生成用到的文件

  • npm install clean-webpack-plugin --save-dev
  • webpack.config.js
  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [
+     new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1 Webpack 1.1 概念簡介 1.1.1 WebPack是什么 1、一個打包工具 2、一個模塊加載工具 3...
    Kevin_Junbaozi閱讀 7,006評論 0贊 16
  • 版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。 webpack介紹和使用 一、webpack介紹 1、由來 ...
    it筱竹閱讀 11,450評論 0贊 21
  • 目錄第1章 webpack簡介 11.1 webpack是什么？ 11.2 官網(wǎng)地址 21.3 為什么使用 web...
    lemonzoey閱讀 1,816評論 0贊 1
  • webpack 介紹 webpack 是什么 為什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert閱讀 6,662評論 2贊 71
  • 愛一個人，我們往往容易營造幻覺，用各種理由情景去匹配他【她】的行為，好讓自己一廂情愿地認定這個人一定是愛自己...
    簍南閱讀 1,663評論 2贊 3

友情鏈接更多精彩內(nèi)容