1 基本概念
入口（entry）
入口起點(entry point)指示 webpack 應該使用哪個模塊，來作爲構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。
輸出(output)
output 屬性告訴 webpack 在哪裏輸出它所創建的 bundles，以及如何命名這些文件，默認值爲 ./dist。
加載程序loader
loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換爲 webpack 能夠處理的有效模塊，然後你就可以利用 webpack 的打包能力，對它們進行處理。
插件（plugins）
loader 被用於轉換某些類型的模塊，而插件則可以用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到重新定義環境中的變量。插件接口功能極其強大，可以用來處理各種各樣的任務。
2 配置結構
// webpack.config.js
module.exports = {
entry: '', // 入口配置
output: {}, // 輸出配置
module: {}, // 放置loader加載器，webpack本身只能打包commonjs規範的js文件，用於處理其他文件或語法
plugins: [], // 插件，擴展功能
// 以下內容進階篇再涉及
resolve: {}, // 爲引入的模塊起別名
devServer: {} // webpack-dev-server
};
3 基本功能
3.1輸入/輸出配置
entry傳入數組相當於將數組內所有文件都打包到bundle.js中。
outpu指定輸出文件名，輸出的路徑
const path = require('path');
module.exports = {
entry: ['./src/index.js', './src/index2.js'], // 入口文件
output: {
filename: 'bundle.js', // 打包輸出文件名
path: path.join(__dirname, './dist') // 打包輸出路徑（必須絕對路徑，否則報錯）
}
};
3.2 清空某目錄或子目錄及文件
npm install -D clean-webpack-plugin
// webpack.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin');
const cdnDir = path.resolve(__dirname, '../../../', 'imgcache.gtimg.cn/vip/')
module.exports = {
...
plugins: [
new CleanWebpackPlugin(['dist']), // 清空項目根目錄下dist
]
};
3.3 html自動構建
npm install html-webpack-plugin -D
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
filename: path.join(__dirname, 'entry.html'),
// 生成的html(絕對路徑：可用於生成到根目錄)
filename: 'html/entry.html',
// 生成的html文件名（相對路徑：將生成到output.path指定的dist目錄下）
template: './src/index.html' // 以哪個文件作爲模板，不指定的話用默認的空模板
})
]
};
3.4 CSS處理——內聯
npm install -D css-loader # 負責處理其中的@import和url()
npm install -D style-loader # 負責內聯
npm install -D less less-loader # less編譯，處理less文件
module配置
// index.js
import './style/index.css';
import './style/test.less';
// webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
// 從右到左，loader安裝後無需引入可直接使用
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: [
{loader: 'style-loader'},
{loader: 'css-loader'},
{loader: 'less-loader'}
]
}
]
}
};
3.5 CSS處理——合併抽離
npm install -D extract-text-webpack-plugin@next
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 實例化1：用於CSS
const extractCSS = new ExtractTextPlugin({
disable: process.env.NODE_ENV == 'development' ? true : false, // 開發環境下直接內聯，不抽離
filename: 'style/extractFromCss.css', // 單個entry時，可寫死
filename: 'style/[name].css', // 多entry時
});
// 實例化2：用於LESS
const extractLESS = new ExtractTextPlugin({省略...});
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: extractCSS.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.less$/,
use: extractLESS.extract({
fallback: 'style-loader',
use: ['css-loader', 'less-loader']
})
}
]
},
plugins: [extractCSS, extractLESS]
};
3.6 圖片(字體/svg)處理
npm install -D url-loader file-loader
3.7 ES6轉義
npm install -D babel-core babel-loader babel-preset-env babel-preset-stage-0
- babel-core 核心包
- babel-loader
- babel-preset-env 定案內語法編譯 （babel-preset-es2015已廢棄）
- babel-preset-stage-0 預案內語法編譯
/ webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/, // npm包不做處理
include: /src/, // 只處理src裏面的
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'stage-0'] // 【重要】順序右到左，先處理高級或特殊語法
}
}
}
]
}
3.8 webpack-dev-server
npm install -D webpack-dev-server
webpack-dev-server是一個小型的Node.js Express服務器,它使用webpack-dev-middleware來服務於webpack的包
contentBase
用於告訴服務器文件的根目錄。這主要用來需要引用靜態文件的時候。
host
設置服務器的主機號，默認是localhost，但是可以自己進行設置，如：
host: "0.0.0.0"
port
設置端口號，如下面的7000
devServer: {
port:7000
}
hot 和 inline
自動刷新和模塊熱替換機制
注意，如果你的項目中使用了熱模塊替換機制，HotModuleReplacementPlugin插件會自動添加到項目中，而不需要再在配置文件中做添加。
webpack-dev-server有兩種模式可以實現自動刷新和模塊熱替換機制
1. Iframe mode(默認,無需配置)
頁面被嵌入在一個iframe裏面，並且在模塊變化的時候重載頁面
2.inline mode（需配置）添加到bundle.js中
當刷新頁面的時候，一個小型的客戶端被添加到webpack.config.js的入口文件中
proxy
重定向是解決跨域的好辦法，當後端的接口擁有獨立的API，而前端想在同一個domain下訪問接口的時候，可以通過設置proxy實現。
如果後端接口地址是192.168.10.10:1000,你可以這樣設置：
proxy: {
"/api": "http://192.168.10.10:1000"
}
publicPath
用於設置編譯後文件的路徑，假設服務器的運行地址是 http://localhost:8080，輸出文件名設置爲bundle.js，那麼默認情況下publicPath是”/”。
4 開發/生產環境
開發環境(development)和生產環境(production)的構建目標差異很大。在開發環境中，我們需要具有強大的、具有實時重新加載(live reloading)或熱模塊替換(hot module replacement)能力的 source map 和 localhost server。而在生產環境中，我們的目標則轉向於關注更小的 bundle，更輕量的 source map，以及更優化的資源，以改善加載時間。由於要遵循邏輯分離，我們通常建議爲每個環境編寫彼此獨立的 webpack 配置。
npm install --save-dev webpack-merge
project
webpack-demo
|- package.json
|- webpack.common.js
|- webpack.dev.js
|- webpack.prod.js
|- /dist
|- /node_modules
webpack.common.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Production'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
plugins: [
...
]
});
webpack.prod.js
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
plugins: [
...
]
});
4.1 NPM Scripts
現在，我們把 scripts 重新指向到新配置。我們將 npm start 定義爲開發環境腳本，並在其中使用 webpack-dev-server，將 npm run build 定義爲生產環境腳本：
package.json
{
"name": "development",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^0.1.17",
"css-loader": "^0.28.4",
"csv-loader": "^2.1.1",
"express": "^4.15.3",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"style-loader": "^0.18.2",
"webpack": "^3.0.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0",
"xml-loader": "^1.2.1"
}
}