entry 打包入口配置
接受三種方式：string， array， object
module.exports = {
entry: './src/main.js'
...
}複製程式碼module.exports = {
entry: ['./src/main.js', './src/test.js']
...
}複製程式碼module.exports = {
entry: {
main: './src/main.js',
test: './src/test.js'
}
...
}複製程式碼output 打包匯出配置
module.exports = {
entry: {
main: './src/main.js',
a: './src.a.js'
},
output: {
path: './dist',
filename: 'js/[name]-[chunkhash].js',
publicPath: 'http://cdn.com/'
}
...
}複製程式碼path：打包後匯出的檔案路徑
filename：打包後的檔名
[name]對應檔名
[hash]打包檔案hash值
[chunkhash]打包後每個單獨檔案的hash值複製程式碼publicPath：打包上線環境，用來替換檔案路徑
plugins 外掛系統(陣列)
html-webpack-plugin 自動化生成專案中的html頁面
通過npm安裝
$ npm install html-webpack-plugin --save-dev複製程式碼在webpack.config.js中
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/main.js',
a: './src/a.js',
b: './src/b.js',
c: './src/c.js'
},
output: {
path: './dist',
filename: [name]-[chunkhash].js,
public: 'http:cdn.com/'
},
plugins: [
//建立一個htmlWebpackPlugin物件，並傳入值
new htmlWebpackPlugin({
template: 'index.html', //生成html檔案的模板檔案
filename: 'a.html', //目標檔案的名稱
inject: false, //插入html文件中的位置，value分別為 true，false，head，body
title: 'this is a.html', // 傳入的html的title
excludeChunks: ['b', 'c'] // 引入的除b.js 與c.js以外的js檔案
}),
new htmlWebpackPlugin({
template: 'index.html',
filename: 'b.html',
inject: false,
title: 'this is b.html',
excludeChunks: ['a', 'c']
}),
new htmlWebpackPlugin({
template: 'index.html',
filename: 'c.html',
inject: false,
title: 'this is c.html',
excludeChunks: ['a', 'b']
})
]
}複製程式碼index.html模板檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 在webpack中預設識別ejs -->
<!-- title的值為htmlWebpackPlugin傳入的值 -->
<title><%= htmlWebpackPlugin.options.title %></title>
<script>
// js的行內引入方法
<%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
</script>
</head>
<body>
<!-- 再通過迴圈遍歷除去main.js 外聯引入對應的js -->
<% for (var k in htmlWebpackPlugin.files.chunks) { %>
<% if (k != 'main') { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script>
<% } %>
<% } %>
</body>
</html>複製程式碼關於html-webpack-plugin外掛的使用，工程原始碼為多頁面應用
git clone https://github.com/kingzez/webpack-demo.git複製程式碼首先切換到
git checkout html-webpack-plugin複製程式碼並執行 npm install 完成依賴的安裝後執行 npm run webpack 檢視效果。
Loaders
- babel-loader
- css-loader
- style-loader
- postcss-loader
- less-loader
- sass-loader
- html-loader
- ejs-loader
- file-loader
- url-loader
- image-webpack-loader
Loader中所有專案原始碼均為單頁面應用。
Loaders 同樣也是一個陣列，需要定義在一個module中
module: {
loaders: [
...
]
}複製程式碼babel-loader
babel-loader 用於對ES6的程式碼的轉換，首先在終端中執行npm
npm install --save-dev babel-loader babel-core複製程式碼然後再webpack.config.js中加入
module.exports = {
context: '__dirname',
entry: './src/app.js',
output: {
path: './dist',
filename: 'js/[name].bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
include: path.resolve(__dirname, 'src'), //path.resolve node的api，用於處理路徑；__dirname為當前專案目錄，
exclude: path.resolve(__dirname, 'node_modules'),
query: {
presets: ['latest'] // babel的配置，可在webpack.config.js中配置也可在package.json或建立.babelrc檔案
}
}
]
}
}複製程式碼css-loader & style-loader & postcss-loader
css-loader 用於處理css模組的打包, style-loader 用於將打包好的css模組插入html中,安裝
npm install --save-dev css-loader複製程式碼npm install --save-dev style-loader複製程式碼在webpack.config.js中加入
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader' // loader處理順序是css-loader打包css檔案，後通過style-loader插入到html中
}
]複製程式碼在處理瀏覽器相容的情況下，需要對各個瀏覽器加字首，這時需要css後處理器postcss-loader，安裝
npm install --save-dev postcss-loader複製程式碼npm install --save-dev autoprefixer // 自動新增字首複製程式碼在webpack.config.js中加入
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader!postcss-loader' // loader處理順序post-loader處理後加上瀏覽器的字首，再由css-loader打包css檔案，後通過style-loader插入到html中
}
]
},
postcss: [
require('autoprefixer')({
browsers: ['last 5 versions'] //瀏覽器的最新五個版本
})
],複製程式碼如果多個css檔案之間存在@import，以上配置還需要修改
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css?importLoaders=1!postcss' // css-loader的importLoaders引數可以解決@import的css檔案不處理的問題
}
]
},
postcss: [
require('autoprefixer')({
browsers: ['last 5 versions'] //瀏覽器的最新五個版本
})
],複製程式碼關於babel-loader css-loader style-loader postcss-loader 的使用，工程原始碼
git checkout css-style-postcss-loader複製程式碼並執行 npm install 完成依賴的安裝後執行 npm run webpack 檢視效果。
less-loader & sass-loader
less-loader 是對less檔案進行處理打包，安裝
npm install --save-dev less-loader複製程式碼在webpack.config.js中加入
loaders: [
{
test: /\.less$/,
loader: 'style!css!postcss!less'
}
]複製程式碼關於less-loader 的使用，工程原始碼
git checkout less-loader複製程式碼並執行 npm install 完成依賴的安裝後執行 npm run webpack 檢視效果。
sass-loader同理不做過多介紹，簡單看一下webpack.config.js
loaders: [
{
test: /\.scss$/,
loader: 'style!css!postcss!sass'
}
]複製程式碼html-loader & ejs-loader
html-loader 和 ejs-loader 用於處理模板檔案，如果你在一個js檔案中import html from 'somewhere'，接著 npm run webpack 會看到報錯資訊，說沒有處理器處理html檔案，so 安裝
npm install --save-dev html-loader複製程式碼同樣也可以處理ejs模板檔案，該ejs模板檔案的副檔名也可以自定義，這裡我們定義tpl
npm install --save-dev ejs-loader複製程式碼看一下在 webpack.config.js 中
loaders: [
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.tpl/,
loader: 'ejs-loader'
}
]複製程式碼關於html-loader ejs-loader 的使用，工程原始碼，可分別執行
git checkout less-loader複製程式碼並執行 npm install 完成依賴的安裝後執行 npm run webpack 檢視html-loader的效果。
git checkout ejs-loader複製程式碼並執行 npm install 完成依賴的安裝後執行 npm run webpack 檢視ejs-loader的效果。
file-loader & url-loader & image-webpack-loader
用於處理圖片以及其他檔案，例子中對圖片處理，先用file-loader處理，那麼安裝
npm install --save-dev file-loader複製程式碼安裝完成後對webpack.config.js配置進行修改
loaders: [
{
test: /\.png|jpg|gif|svg$/i, //用於匹配各種副檔名結尾的檔案
loader: 'file-loader',
query: {
name: 'assets/[name]-[hash:5].[ext]' // 可選 用於將圖片打包到assets資料夾中
}
}
]複製程式碼在根目錄中的index.html css 中的img background 的圖片引用一般為相對路徑，最佳解決方案為線上的CDN絕對路徑，在模板檔案中的圖片引用如果一定要使用相對路徑的話，需要這樣
<img src="${ require('../../assets/avator.png') }" />複製程式碼詳細程式碼請看我的工程專案原始碼，關於 file-loader 的使用，工程原始碼，執行
git checkout file-loader複製程式碼並執行 npm install 完成依賴的安裝後執行 npm run webpack 檢視 file-loader 的效果。
url-loader 同樣也可以實現圖片的處理，安裝
npm install --save-dev url-loader複製程式碼安裝完成後，看一下webpack.config.js
loaders: [
{
test: /\.png|jpg|gif|svg$/i, // image 可用 file-loader 和 url-loader image-loader 處理
loader: 'url-loader',
query: {
limit: 20000, //定義限制圖片打包大小，超過限制值，會將圖片轉成base64寫入
name: 'assets/[name]-[hash:5].[ext]'
}
}
]複製程式碼較好的方案是 url-loader 與 image-webpack-loader 結合使用，安裝
npm install --save-dev image-webpack-loader複製程式碼安裝完成後，看一下webpack.config.js中
loaders: [
{
test: /\.png|jpg|gif|svg$/i, // image 可用 file-loader 和 url-loader image-loader 處理
loaders: [
'url-loader?limit=1000&name=assets/[name]-[hash:5].[ext]',
'image-webpack'
]
}
]複製程式碼首先通過 image-webpackloader 壓縮圖片後處理再由url-loader處理，通過引數limit限制圖片大小，圖片超過limit限制的值將轉成base64，如果沒超過限制值，則正常打包圖片。
關於 url-loader 與 image-webpack-loader 的使用，工程原始碼，執行
git checkout image-webpack-loader複製程式碼並執行 npm install 完成依賴的安裝後執行 npm run webpack 檢視 url-loader 與 image-webpack-loader 結合的效果。
完整的webpack.config.js demo檢視，請執行
git checkout release複製程式碼本紀實經過本人實際操作後的記錄，算為入門級的實踐。