webpack(2.0)入門詳解 | 掘金技術徵文

時間  2019-11-06
標籤 webpack 2.0 入門 詳解 技術 徵文 简体版
原文   原文鏈接


聲明：以此文寫給摸索和學習使用webpack的初級使用者，由於官方文檔只給出了關鍵點的解讀，對於入門的初學者看的可謂是一頭霧水，如今好多的文章也是隻是介紹了本身的想法和案例，沒有講明白基礎點

我所接觸的前端模塊化變動

兩年前實習所在的一家創業公司在前端工程化方面還很傳統，幾乎稱不上是前端工程化，由於咱們經過使用Ant這個構建工具，在一個build.xml中配置將全部的js都打包成一個js文件，css也是，可想而知項目小的時候，前期很順利，後來項目愈來愈大，新需求新邏輯愈來愈多，這種方法即將被淘汰掉。javascript

後半年咱們開始接觸grunt+sea.js，將之前的項目所有重構，性能上有了很大的改善，可是慢慢地就會發現須要配置的task愈來愈多等問題，那時候jquery+bootstrap仍是咱們的主要開發框架。css

一年後我畢業了離開創業公司，來到了如今的公司，見識到了真正的前端工程化項目，目前咱們還處在使用webpack+gulp的階段，今年即將全面使用webpack 去掉gulphtml

來一段廢話

現在的Webpack已是一個出色的前端自動化構建工具、模塊化工具、資源管理工具。至於Webpack是什麼？爲何使用Webpack？gulp,grant,webpack 什麼關係和區別這些在此不作贅述，太多的文檔和文章了你們去了解一下前端

走進webpack 基本實例(翻譯2.0官方例子)

先不要考慮把每個點和知識都瞭解和懂了再動手，我通常都是直接看官方的英文文檔的Getting Started,相信我這絕對是最快最正確的學習方式java

一步步開始吧node

  • 基礎需求：先裝好node，由於webpack是一個基於node的項目
  • 初始化一個webpack項目根據如下命令
//cd 到你的一個目錄下能夠是documents or desktop一步步輸入命令
mkdir webpack-demo && cd webpack-demo 
npm init -y
npm install --save-dev webpack複製代碼

這時候打開你的項目文件你會發現webpack-demo文件夾下多了兩個文件jquery

  • package.json
  • node_modules

而後咱們在編輯器中打開webpack-demo文件夾，手動建立下列目錄文件webpack

  1. app文件夾/index.js(用來寫js邏輯)
  2. index.html(實例的入口頁面)
  3. webpack.config.js(webpack的配置文件)

上代碼示例(粘貼到你的文件中用吧)app/index.js程序員

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

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());複製代碼

因爲在這個js中依賴lodash(這是一個具備一致接口、模塊化、高性能等特性的 JavaScript 工具庫),因此在咱們的項目中須要加入這個依賴到咱們的node_modules中，執行如下命令便可web

npm install --save lodash複製代碼

以上命令只是將lodash這個依賴庫添加進去，然而咱們要使用還得經過import 將它引入到具體的js文件中，因此修改咱們的app/index.js，添加一行,而後將它以 _ 的別名綁定（不會形成全局範圍變量名污染）

import _ from 'lodash';
function component () {
  var element = document.createElement('div');
  element.innerHTML = _.join(['Hello','webpack'], ' ');
  return element;
}
document.body.appendChild(component());複製代碼

下面來寫index.html

<html>
  <head>
    <title>webpack 2 demo</title>
  </head>
  <body>
   <script src="dist/bundle.js"></script>
  </body>
</html>複製代碼

你確定會問？dist目錄沒有啊？更別說bundle.js了，彆着急繼續往下看webpack.config.js

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};複製代碼

而後在運行webpack 命令（若是存在 webpack.config.js，webpack 命令將默認選擇使用它）

webpack --config webpack.config.js複製代碼

命令行的結果

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./app/index.js 278 bytes {0} [built]複製代碼

此時咱們的項目目錄中已經成功建立 dist/bundle.js 文件，打開瀏覽器運行你的index.html頁面會顯示'Hello webpack'

讓我門帶着疑問咱們開始講下面的內容

webpack配置文件詳解

webpack的配置文件是一個node.js的module,它沒有固定的命名，咱們看到的例子都是webpack.config.js，一開始我覺得這是約定成俗的固定名字，就例如gulpfile.js,它也沒有固定的路徑要求，若是你直接用webpack來執行編譯，那麼webpack默認讀取的將是當前目錄下的webpack.config.js

webpack.config.js用CommonJS風格來書寫，形如：

module.exports = {
    entry: "./entry",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    }
}複製代碼

若是你有其它命名的須要或是你有多份配置文件，可使用--config參數傳入路徑來執行：

$ webpack --config ./webpackConfig/dev.config.js複製代碼

一些經常使用基本概念

  • 入口文件配置：entry參數

entry能夠是字符串形式的單個文件入口，也能夠是對象形式的多入口，若是是多個單頁應用程序，那麼則使用多入口的方式來獨立每一個應用

entry: './app/index.js',複製代碼
單入口 
entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
}複製代碼
多入口
  • 輸出文件：output參數

output參數告訴webpack以什麼方式來生成/輸出文件，值得注意的是，與entry不一樣，output至關於一套規則，全部的入口都必須使用這一套規則，不能針對某一個特定的入口來制定output規則，於此同時output有不少options,這裏介紹比較經常使用的：

path、publicPath、filename、chunkFilename

全部的opitons

webpack中output配置項必需要包含的兩個參數是path和filename

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;複製代碼

path

path參數表示生成文件的根目錄，須要傳入一個絕對路徑。path參數和後面的filename參數共同組成入口文件的完整路徑

filename

filename指定每一個輸出文件在最終生成目錄上的名稱。

1.單個入口文件的output配置

{
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/build'
  }
}

// writes to disk: ./build/bundle.js複製代碼

2.多入口文件的output配置，有如下三種規則

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/build'
  }
}

// writes to disk: ./build/app.js, ./build/search.js複製代碼
  • [name]，指代入口文件的name，也就是上面提到的entry參數的key，所以，咱們能夠在name裏利用/，便可達到控制文件目錄結構的效果。
  • [hash]，指代本次編譯的一個hash版本，值得注意的是，只要是在同一次編譯過程當中生成的文件，這個[hash]的值就是同樣的；在緩存的層面來講，至關於一次全量的替換。
  • [chunkhash]，指代的是當前chunk的一個hash版本，也就是說，在同一次編譯中，每個chunk的hash都是不同的；而在兩次編譯中，若是某個chunk根本沒有發生變化，那麼該chunk的hash也就不會發生變化。這在緩存的層面上來講，就是把緩存的粒度精細到具體某個chunk，只要chunk不變，該chunk的瀏覽器緩存就能夠繼續使用。

publicPath

publicPath參數表示的是一個URL路徑（指向生成文件的根目錄），用於生成css/js/圖片/字體文件等資源的路徑，以確保網頁能正確地加載到這些資源。 publicPath參數跟path參數的區別是：path參數實際上是針對本地文件系統的，而publicPath則針對的是瀏覽器；所以，publicPath既能夠是一個相對路徑，如示例中的'../../../../build/'，也能夠是一個絕對路徑如http形式的網頁連接。

chunkFilename

chunkFilename參數與filename參數相似，都是用來定義生成文件的命名方式的，只不過，chunkFilename參數指定的是除入口文件外的chunk

如今來講說咱們最開始的案例中用到的path變量是什麼，在最開始講到webpack的配置文件是一個node.js的module，因此這裏的path其實也是node.js的一個模塊，使用來處理路徑的模塊，它提供了不少方法好比獲取絕對路徑的path.resolve()等，能夠去搜索資料學習

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};複製代碼
  • 各類Loader配置：module參數
    webpack一直號稱可以打包任何資源，採用的就是Loader，loader是對應用程序中資源文件進行轉換。它們是（運行在Node.js中的）函數，能夠將資源文件做爲參數的來源，而後返回新的資源文件

這裏距舉一個打包css的例子，要經過webpack打包CSS，像任何其餘模塊同樣將CSS導入JavaScript代碼，並使用css-loader（它輸出CSS做爲JS模塊）

  1. 首先，安裝相對應的 loader
  2. 像JavaScript模塊同樣導入CSS文件，例如在index.js中
  3. 其次，配置 webpack.config.js，對每一個 .css 文件使用 css-loader

$ npm install --save-dev css-loader

建立一個index.css在index.js中

import './index.css';

配置CSS和JavaScript打包在一塊兒

module.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            use: 'css-loader'
        }]
    }
}複製代碼
  • 更多的內容例如插件 模塊 熱替換等內容請自行學習

寫在最後的總結

看完這篇文章，若是按照個人步驟一步步實現，確定對webpack(2.0)已經入門了，下面須要的就是你花費時間學習官方文檔而且結合本身的項目來實際操做了，附上官網的文檔，2.0的文檔寫的很清楚和詳細webpack2.0

Cayley 一個不斷努力學習的女程序員

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程