webpack 2 實踐系列（一） — 安裝與入門

時間 2019-12-05

標籤 webpack 實踐系列安裝入門简体版

原文原文鏈接

源碼地址：https://github.com/silence717/webpack2-demos javascript

webpack在你的應用中是一個模塊打包工具。webpack能夠簡化工做流，快速構建一個應用程序的依賴關係圖，按照它們正確的順序綁定。webpack能夠配置定製優化你的代碼，拆分vendor/css/js代碼用於生產環境，運行一個能夠及時部署代碼而且頁面無刷新的開發服務器，還有許多很酷的功能。css

安裝webpack

開始以前首先你得在本地安裝一個新版的nodejs。這是一個比較好的基礎。老版本你可能會遇到各類與webpack相關的功能丟失或者缺乏一些依賴的包。html

全局安裝

npm install webpack -g

安裝成功以後，如今webpack命令就在全局生效。
然而，這不是一個最佳實踐，由於它會鎖定到一個特定版本的webpack,你在項目中使用不一樣版本的可能會失效。java

本地安裝

npm install webpack --save-dev
npm install webpack@<version> --save-dev

這是一種比較推薦的方法。
若是你想運行本地安裝的webpack,你能夠進入它的bin裏面，就像這樣 node_modules/.bin/webpacknode

極端的方式

若是你對使用最新的webpack有極大的熱情(注意 - 多是不穩定的)，你能夠直接安裝webpack庫使用。webpack

npm install webpack/webpack#<tagname/branchname>

Creating a bundle

建立一個demo目錄去實踐webpack.git

mkdir webpack2-demo && cd webpack2-demo
mkdir demo01-getting-started && cd demo01-getting-started
npm init -y
npm install --save-dev webpack
npm install --save lodash

如今咱們建立一個index.js文件
getting-started/src/index.jsgithub

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

  /* lodash is required for the next line to work */
  element.innerHTML = _.map(['Hello','webpack'], function(item){
    return item + ' ';
  });

  return element;
}

document.body.appendChild(component());

爲了運行這段代碼，咱們建立一個一個html
index.htmlweb

<html>
  <head>
    <title>Webpack demo</title>
    <script src="https://unpkg.com/lodash@4.16.6" type="text/javascript"></script>
  </head>
  <body>
    <script src="app/index.js" type="text/javascript"></script>
  </body>
</html>

在這栗子中，使用 script 標籤引入依賴。
index.js依賴lodash，因此最最開始引入它。這個裏面並無很直接的代表index.js依賴lodash庫，只是使用了lodash的變量 _。npm

這種管理javascript項目會存在一些問題：

若是一個依賴丟失，或者沒有按照正確的順序去引入，應用將不會工做。
若是一個依賴被引入了，可是從未使用，瀏覽器就須要加載根本不須要的大段代碼。

爲了將lodash依賴關係與index.js捆綁到一塊兒，咱們須要導入lodash。

+ import _ from 'lodash';

function component () {
  ...

一樣咱們須要改變index.html文件只包含一個bundlejs文件。

<html>
  <head>
    <title>Webpack demo</title>
-   <script src="https://unpkg.com/lodash@4.16.6" type="text/javascript"></script>
-   <script src="app/index.js" type="text/javascript"></script>
  </head>
  <body>
+   <script src="dist/bundle.js" type="text/javascript"></script>
  </body>
</html>

如今index.js明確代表依賴lodash，而且將其綁定到_，不再會產生全局命名污染。

執行webpack命令，入口文件爲index.js，輸出bundle.js文件，其中未使用的依賴關係不會打入bundle.js中。

webpack src/index.js dist/bundle.js
// 輸出
Hash: 73259977daef4d7ca66c
Version: webpack 2.1.0-beta.28
Time: 558ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./src/index.js 371 bytes {0} [built]

用一個配置文件來使用webpack

webpack.config.js

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: './dist'
    }
};

使用webpack運行這個文件：

webpack --config webpack.config.js
// 輸出
Hash: 54fb380c0318be007543
Version: webpack 2.1.0-beta.28
Time: 562ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  543 kB       0  [emitted]  [big]  main
   [3] ./src/index.js 371 bytes {0} [built]

若是webpack.config.js已經存在，webpack命令會默認選擇它
配置文件可以靈活使用webpack,添加loaders,插件，解析選項和許多其餘加強功能。

在npm中使用Webpack

咱們在package.json中設置一個快捷方式，運行webpack。

...
"scripts": {
    "build": "webpack"
  }
...

如今咱們直接運行npm run build命令實現與上面相同的功能。

總結

在這個栗子中，咱們瞭解了webpack的基本概念和配置，以後咱們將按照API進一步深刻學習Webpack。

PS：本文徹底屬於邊實踐學習邊寫，會不斷更新，但願不對的地方能夠及時指出。

相關標籤/搜索

每日一句

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