Webpack入門--構建web前端工程的利器

本文涉及到的知識點:

  • webpack的長處與特色
  • webpack基礎知識
  • package.json

零、What is Webpack?

1. What?

  • Webpack可以看做是模塊打包機：分析項目結構，找到JavaScript模塊以及其他的一些預設，打包為合適的格式以供瀏覽器使用。
  • Webpack的工作方式是：把項目當做一個整體，通過一個主文件（如index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最好打包為一個瀏覽器可識別的JavaScript文件。

2. Why?

  • 模塊化： 把復雜的程序細化為小的文件
  • 使我們能夠實現目前版本JavaScript不能直接使用的特性，并且之后還能能轉換為瀏覽器可以識別的JavaScript文件
  • Scss、Less等CSS預處理器

一、Getting Started

1. 安裝

mkdir webpack-demo && cd webpack-demo //創建并打開根目錄
npm init -y  //初始化package.json文件
npm install --save-dev webpack //安裝webpack并加入配置文件列表

2. 利用webpack指令簡單打包

將source code(./src)與distribution code(./dist)分離，source code由我們編輯，distrbution code是我們構建過程總的最優化輸出，并且distrbution code是被瀏覽器加載的最終文件。

  • 項目結構
webpack-demo
  |- package.json
  |-node_modules
  |- /dist //source code
    |- index.html
  |- /src  //distribution code
    |- index.js

  • 打包

    ./node_modules/.bin/webpack src/index.js dist/bundle.js

  • 輸出結果

output_1

3. Using a Configuration

通過使用配置文件代替直接的配置指令

  • 項目結構
webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js
  • webpack.congig.js
const path = require('path');

module.exports = {
    entry:'./src/index.js',
    output: {
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    }
};
  • 輸出結果
output_2

二、package.json

1. JSON對象速覽

  • JSON(JavaScript Object Notation,即JavaScript 對象表示法)是一種用于數據交換的文本格式
  • 具有兩個顯著優點：1. 書寫簡單，一目了然；2. 符合JavaScript原生語法，可以直接由解析引起處理，不需另加解析代碼。
  • 每個JSON文檔只包含一個值，要么是簡單類型的值，要么是復合類型的值

方法

  • JSON.stringify(par1,par2,par3)：將一個值轉為字符串。該字符串符合 JSON 格式，并且可以被JSON.parse方法還原
  • obj.toJSON()：如果有對象有自定義的toJSON方法，則JSON,stringify會使用這個方法的返回值作為參數
  • JSON.parse()：用于將JSON字符串轉化成對象

2. package.json

package.json文件，定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數據）

  • scripts
    scripts指定了運行腳本命令的npm命令行縮寫
    eg:
"scripts": {
    "preinstall": "echo here it comes!",
    "postinstall": "echo there it goes!",
    "start": "node index.js",
    "test": "tap test/*.js"
}
  • dependences&&devdenpendences
    dependencies字段指定了項目運行所依賴的模塊，devDependencies指定項目開發所需要的模塊。
    它們都指向一個對象。該對象的各個成員，分別由模塊名和對應的版本要求組成，表示依賴的模塊及其版本范圍。
install express --save  //--save參數表示將該模塊寫入dependencies屬性
install express --save-dev  //--save-dev表示將該模塊寫入devDependencies屬性

  • bin
    bin項用來指定各個內部命令對應的可執行文件的位置，在node_modules/.bin/目錄下建立符號鏈接。

  • config
    config字段用于添加命令行的環境變量。

三、Loaders

webpack把所有的文件當成(.css .html .less .jpg .etc)當做一個module,可是webpack自身只能理解Javascript，因此需要loader作為各個模塊資源的轉換器，loader本身實質上是一個函數，接受源文件作為參數，返回轉換的結果。這樣，我們就可以通過 require 來加載任何類型的模塊或文件，比如CoffeeScript、JSX、LESS或圖片。

1.Loader features

  • Loader可以通過管道方式鏈式調用，每個loader可以把資源轉換成任意格式并傳遞給下一個loader，但是最后一個loader必須返回JavaScript；
  • Loader可以同步或異步執行；
  • Loader運行在node.js環境中，所以可以做任何可能的事情；
  • Loader可以接受參數，以此來傳遞配置項給loader；
  • Loader可以通過文件擴展名（或正則表達式）綁定給不同類型的文件。
  • Loader可以通過文件 npm 來進行發布和安裝；
  • 除了通過 package.json 的 main 指定，通常的模塊也可以導出一個loader來使用；
    Loader可以訪問配置；
  • 插件可以讓loader擁有更多特性；
  • Loader可以分發出附加的任意文件。

2. Resolve loaders

  • Loader本身也是運行在node.js環境中的JavaScript模塊，它通常會返回一個函數。大多數情況下，我們通過npm來管理loader，但是你也可以在項目中自己寫loader模塊；
  • 按照慣例，而非必須，loader一般以 xxx-loader ，xxx 代表了這個loader要做的轉換功能，比如 json-loader；在引用loader的時候可以使用全名 json-loader 或者使用短名 json。這個命名規則和搜索優先級順序在webpack的 resolveLoader.moduleTemplates api中定義。

3.installation

npm install --save-dev css-loader
npm install --save-dev ts-loader

4.Using Loaders

使用loaders的三種方法：1.configuration 2.inline 3.CLI

  • configuration(recommended)
module: { 
rules: [ { test: /\.css$/,
           use: [ { loader: ['style-loader']  }, 
                    { loader: ['css-loader'] , options: { modules: true } } ] } ] }
  • inline
  1. !為使用loader的標記，!前為loader模塊名稱，!后為需要編譯的文件.
  2. loader模塊既可以使用相對路徑引用，又可以使用絕對路徑引用
  3. 可以用鏈式調用，如下例先通過css-loader，后通過style-loader
  4. ?key=value&foo=bar和?{"key":"value","foo":"bar"}表示所設參數
 import Styles from 'style-loader!css-loader?modules!./styles.css';
  • CLI
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

5.使用loader加載順序

四、Plugins

利用plugins可以執行許多loaders無法實現的操作和自定義功能，plugins有兩種獲取途徑：一種是webpack本身內置的，另一種需要通過npm安裝第三方插件。

使用plugins，你需要：
1.在頭文件引入require模塊；
2.在module.exports中引入plugins數組。

//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //安裝第三方插件
const webpack = require('webpack'); //獲取內置插件

plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]//需要用new操作符創建新對象

五、Webpack CLI

參見Webpack入門 --唐紫依

參考資料

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容