首頁 > 開發者 > JavaScript
關於webpack2和模組打包的新手指南（小結），webpack2新手指南
webpack已成為現代Web開發中最重要的工具之一。它是一個用於JavaScript的模組打包工具，但是它也可以轉換所有的前端資源，例如HTML和CSS，甚至是圖片。它可以讓你更好地控制應用程式所產生的HTTP請求數量、允許你使用其他資源的特性（例如Jade、Sass和ES6）。webpack還可以讓你輕鬆地從npm下載包。
本文主要針對那些剛接觸webpack的同學，將介紹初始設定和配置、模組、載入器、外掛程式、代碼分割和熱模組替換。
在繼續學習下面的內容之前需要確保你的電腦中已經安裝了Node.js。
初始配置
使用npm初始化一個新項目並安裝webpack：
mkdir webpack-democd webpack-demonpm init -ynpm install webpack@beta --save-devmkdir srctouch index.html src/app.js webpack.config.js
編寫下面這些檔案：
<!-- index.html --><!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Hello webpack</title> </head> <body> <div id="root"></div> <script src="dist/bundle.js"></script> </body></html>
// src/app.jsconst root = document.querySelector('#root')root.innerHTML = `<p>Hello webpack.</p>`
// webpack.config.jsconst webpack = require('webpack')const path = require('path')const config = { context: path.resolve(__dirname, 'src'), entry: './app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [{ test: /\.js$/, include: path.resolve(__dirname, 'src'), use: [{ loader: 'babel-loader', options: { presets: [ ['es2015', { modules: false }] ] } }] }] }}module.exports = config
上面的配置是一個普通的出發點，它通知webpack將入口檔案src/app.js編譯輸出到檔案/dist/bundle.js中、使用babel將所有的.js檔案從ES2015轉換成ES5。
為了讓它可以轉換到ES5格式的JS檔案，我們需要安裝三個包：babel-core、webpack載入器babel-loader和預置babel-preset-es2015。使用{ modules: false }讓Tree Shaking 從打包檔案中刪除未使用的匯出項（exports）以減少檔案大小。
npm install babel-core babel-loader babel-preset-es2015 --save-dev
最後，用以下內容替換package.json的scripts部分：
"scripts": { "start": "webpack --watch", "build": "webpack -p"},
在命令列中運行npm start將以監視模式啟動webpack，當src目錄中的.js檔案更改時，它將重新編譯bundle.js。控制台中的輸出展示了打包檔案的資訊，注意打包檔案的數量和大小十分重要。
現在當你在瀏覽器中載入index.html頁面時會看到"Hello webpack."。
open index.html
開啟dist/bundle.js檔案看看webpack都做了哪些事情，頂部是webpack的模組引導代碼，底部是我們的模組。到目前為止，你可能對於這個還沒有一個深刻的印象。但是現在你可以開始編寫ES6模組，webpack將產生適用於所有瀏覽器的打包檔案。
使用Ctrl + C停止webpack，運行npm run build以生產模式編譯我們的bundle.js。
注意，打包檔案的大小從2.61 kB減少到了585位元組。再看一下dist/bundle.js檔案，你會看到大量難懂的代碼，因為我們使用UglifyJS壓縮了它。這樣的話，我們可以使用更少的代碼達到與之前一樣的效果。
模組
優秀的webpack知道如何使用各種格式的JavaScript模組，最著名的兩個是：
我們可以通過安裝、匯入lodash來測試這些格式的模組。
npm install lodash --save
// src/app.jsimport {groupBy} from 'lodash/collection'const people = [{ manager: 'Jen', name: 'Bob'}, { manager: 'Jen', name: 'Sue'}, { manager: 'Bob', name: 'Shirley'}, { manager: 'Bob', name: 'Terrence'}]const managerGroups = groupBy(people, 'manager')const root = document.querySelector('#root')root.innerHTML = `<pre>${JSON.stringify(managerGroups, null, 2)}</pre>`
運行npm start啟動webpack並重新整理index.html，你可以看到一個根據manager分組的數組。
讓我們將這個數組轉移到它自己的模組people.js中。
// src/people.jsconst people = [{ manager: 'Jen', name: 'Bob'}, { manager: 'Jen', name: 'Sue'}, { manager: 'Bob', name: 'Shirley'}, { manager: 'Bob', name: 'Terrence'}]export default people
我們可以在app.js中使用相對路徑輕鬆的匯入它。
// src/app.jsimport {groupBy} from 'lodash/collection'import people from './people'const managerGroups = groupBy(people, 'manager')const root = document.querySelector('#root')root.innerHTML = `<pre>${JSON.stringify(managerGroups, null, 2)}</pre>`
注意：像lodash/collection這樣沒有相對路徑的匯入是匯入安裝在/node_modules的模組，你自己的模組需要一個類似./people的相對路徑，你可以以此區分它們。
載入器
我們已經介紹過，你可以通過配置像babel-loader這樣的載入器來告訴webpack在遇到不同檔案類型的匯入時該怎麼做。你可以將多個載入器組合在一起，應用到很多檔案轉換中。在JS中匯入.sass檔案是一個非常的例子。
Sass
這種轉換涉及三個單獨的載入器和node-sass庫：
npm install css-loader style-loader sass-loader node-sass --save-dev
在設定檔中為.scss檔案添加新規則。
// webpack.config.jsrules: [{ test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ]}, { // ...}]
注意： 任何時候更改webpack.config.js中的任意一個載入規則都需要使用Ctrl + C和npm start重新啟動構建。
載入器序列以相反的順序進行處理：
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
