關(guān)于webpack2和模塊打包的新手指南（小結(jié)）
webpack已成為現(xiàn)代Web開發(fā)中最重要的工具之一。它是一個用于JavaScript的模塊打包工具，但是它也可以轉(zhuǎn)換所有的前端資源，例如HTML和CSS，甚至是圖片。它可以讓你更好地控制應(yīng)用程序所產(chǎn)生的HTTP請求數(shù)量、允許你使用其他資源的特性（例如Jade、Sass和ES6）。webpack還可以讓你輕松地從npm下載包。
本文主要針對那些剛接觸webpack的同學(xué)，將介紹初始設(shè)置和配置、模塊、加載器、插件、代碼分割和熱模塊替換。
在繼續(xù)學(xué)習(xí)下面的內(nèi)容之前需要確保你的電腦中已經(jīng)安裝了Node.js。
初始配置
使用npm初始化一個新項目并安裝webpack：
mkdir webpack-demo cd webpack-demo npm init -y npm install webpack@beta --save-dev mkdir src touch 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.js
const root = document.querySelector('#root')
root.innerHTML = `<p>Hello webpack.</p>`
// webpack.config.js
const 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
上面的配置是一個普通的出發(fā)點，它通知webpack將入口文件src/app.js編譯輸出到文件/dist/bundle.js中、使用babel將所有的.js文件從ES2015轉(zhuǎn)換成ES5。
為了讓它可以轉(zhuǎn)換到ES5格式的JS文件，我們需要安裝三個包：babel-core、webpack加載器babel-loader和預(yù)置babel-preset-es2015。使用{ modules: false }讓Tree Shaking 從打包文件中刪除未使用的導(dǎo)出項（exports）以減少文件大小。
npm install babel-core babel-loader babel-preset-es2015 --save-dev
最后，用以下內(nèi)容替換package.json的scripts部分：
"scripts": {
"start": "webpack --watch",
"build": "webpack -p"
},
在命令行中運行npm start將以監(jiān)視模式啟動webpack，當(dāng)src目錄中的.js文件更改時，它將重新編譯bundle.js。控制臺中的輸出展示了打包文件的信息，注意打包文件的數(shù)量和大小十分重要。
現(xiàn)在當(dāng)你在瀏覽器中加載index.html頁面時會看到"Hello webpack."。
open index.html
打開dist/bundle.js文件看看webpack都做了哪些事情，頂部是webpack的模塊引導(dǎo)代碼，底部是我們的模塊。到目前為止，你可能對于這個還沒有一個深刻的印象。但是現(xiàn)在你可以開始編寫ES6模塊，webpack將生成適用于所有瀏覽器的打包文件。
使用Ctrl + C停止webpack，運行npm run build以生產(chǎn)模式編譯我們的bundle.js。
注意，打包文件的大小從2.61 kB減少到了585字節(jié)。再看一下dist/bundle.js文件，你會看到大量難懂的代碼，因為我們使用UglifyJS壓縮了它。這樣的話，我們可以使用更少的代碼達到與之前一樣的效果。
模塊
優(yōu)秀的webpack知道如何使用各種格式的JavaScript模塊，最著名的兩個是：
- ES2015 import語句
- CommonJS require()語句
我們可以通過安裝、導(dǎo)入lodash來測試這些格式的模塊。
npm install lodash --save
// src/app.js
import {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，你可以看到一個根據(jù)manager分組的數(shù)組。
讓我們將這個數(shù)組轉(zhuǎn)移到它自己的模塊people.js中。
// src/people.js
const people = [{
manager: 'Jen',
name: 'Bob'
}, {
manager: 'Jen',
name: 'Sue'
}, {
manager: 'Bob',
name: 'Shirley'
}, {
manager: 'Bob',
name: 'Terrence'
}]
export default people
我們可以在app.js中使用相對路徑輕松的導(dǎo)入它。
// src/app.js
import {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這樣沒有相對路徑的導(dǎo)入是導(dǎo)入安裝在/node_modules的模塊，你自己的模塊需要一個類似./people的相對路徑，你可以以此區(qū)分它們。
加載器
我們已經(jīng)介紹過，你可以通過配置像babel-loader這樣的加載器來告訴webpack在遇到不同文件類型的導(dǎo)入時該怎么做。你可以將多個加載器組合在一起，應(yīng)用到很多文件轉(zhuǎn)換中。在JS中導(dǎo)入.sass文件是一個非常的例子。
Sass
這種轉(zhuǎn)換涉及三個單獨的加載器和node-sass庫：
npm install css-loader style-loader sass-loader node-sass --save-dev
在配置文件中為.scss文件添加新規(guī)則。
// webpack.config.js
rules: [{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}, {
// ...
}]
注意： 任何時候更改webpack.config.js中的任意一個加載規(guī)則都需要使用Ctrl + C和npm start重新啟動構(gòu)建。
加載器序列以相反的順序進行處理：
- sass-loader 將Sass轉(zhuǎn)換為CSS。
- css-loader 將CSS解析為JavaScript并解析所有依賴。
- style-loader將我們的CSS輸出到文檔中的
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
HTML+CSS+JavaScript創(chuàng)建一個簡單的井字游戲
使用javascript創(chuàng)建游戲是最有趣的學(xué)習(xí)方式。它會讓你保持動力，這對于學(xué)習(xí)?Web?開發(fā)等復(fù)雜技能至關(guān)重要。本文將使用HTML、CSS和?Javascript創(chuàng)建一個井字游戲。感興趣的童鞋可以關(guān)注一下2021-11-11
正如標(biāo)題所示的獲取非最后一列td值并將title設(shè)為該值，下面使用jquery來簡單實現(xiàn)下，需要的朋友可以參考下2013-10-10
這篇文章主要介紹了原生js+css調(diào)節(jié)音量滑塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
ListBox實現(xiàn)上移,下移,左移,右移的簡單實例
這篇文章主要介紹了ListBox實現(xiàn)上移,下移,左移,右移的簡單實例。需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要為大家詳細介紹了javascript實現(xiàn)簡單滾動窗口，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
在開發(fā)中,經(jīng)常會遇到接口重復(fù)請求導(dǎo)致的各種問題,這篇文章主要給大家介紹了關(guān)于Axios取消重復(fù)請求的相關(guān)資料,需要的朋友可以參考下2021-06-06
JS?中的URLSearchParams?對象操作(以對象的形式上傳參數(shù)到url)
這篇文章主要介紹了JS中URLSearchParams的基本用法，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了手把手教你 CKEDITOR 4 擴展插件制作,結(jié)合具體實例形式詳細分析了CKEditor4插件制作的步驟與相關(guān)操作注意事項,需要的朋友可以參考下2019-06-06
本文主要介紹了Typescript實現(xiàn)棧的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08
這篇文章主要介紹了JS實現(xiàn)的走迷宮小游戲,涉及javascript鍵盤事件響應(yīng)及頁面元素動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2017-07-07