一、主要概念：
1屑埋、entry(入口)
入口起點(entry point)指示 webpack 應(yīng)該使用哪個模塊肆汹，來作為構(gòu)建其內(nèi)部依賴圖的開始。進入入口起點后输虱，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的些楣。
entry: './src/index.js', // 1、單個入口
entry: {
main: './src/index.js',
}, // 2宪睹、單個入口愁茁，是1的具體寫法
entry: ['./src/index.js', './src/index2.js',], // 3、多個入口亭病，輸出為1個
entry: {
test1: './src/index.js',
test2: './src/index.js',
}, // 4鹅很、多個入口，輸出為多個（擴展性寫法）
一般情況下都是一個html對應(yīng)一個入口(單頁應(yīng)用和多頁應(yīng)用)
2罪帖、output(輸出)
配置 output 選項可以控制 webpack 如何向硬盤寫入編譯文件道宅。注意，即使可以存在多個入口起點胸蛛，但只指定一個輸出配置污茵。
----輸出單個文件
output: {
filename: 'bundle.js', // 輸出文件名
path: '/public' // 輸出文件路徑
}
----多個入口，輸出使用[占位符[name]來根據(jù)入口的key來輸出多個的文件
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
3葬项、loader
loader 用于對模塊的源代碼進行轉(zhuǎn)換泞当。loader 可以使你在 import 或require模塊時預(yù)處理文件。因此民珍，loader 類似于其他構(gòu)建工具中“任務(wù)(task)”襟士，并提供了處理前端構(gòu)建步驟的強大方法盗飒。loader 可以將文件從不同的語言（如 TypeScript）轉(zhuǎn)換為 JavaScript，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL陋桂。有三種方式
- [Configuration] (推薦): Specify them in your webpack.config.js file.(外聯(lián))
- [Inline]: Specify them explicitly in each
importstatement.(內(nèi)聯(lián)) - [CLI]: Specify them within a shell command.
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1000
}
}
]
},
{
test: /\.(js|jsx)$/,
use: 'babel-loader'
},
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
]
import Styles from 'style-loader!css-loader?modules!./styles.css'; // 內(nèi)聯(lián)
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader' // CLI
loader 支持鏈?zhǔn)絺鬟f逆趣。能夠?qū)Y源使用流水線(pipeline)。一組鏈?zhǔn)降?loader 將按照相反的順序執(zhí)行嗜历。loader 鏈中的第一個 loader 返回值給下一個 loader宣渗。在最后一個 loader，返回 webpack 所預(yù)期的 JavaScript梨州。
loader 可以是同步的痕囱，也可以是異步的。
loader 運行在 Node.js 中暴匠，并且能夠執(zhí)行任何可能的操作鞍恢。
loader 接收查詢參數(shù)。用于對 loader 傳遞配置每窖。
loader 也能夠使用 options 對象進行配置帮掉。
除了使用 package.json 常見的 main 屬性，還可以將普通的 npm 模塊導(dǎo)出為 loader窒典，做法是在 package.json 里定義一個 loader 字段蟆炊。
插件(plugin)可以為 loader 帶來更多特性。
loader 能夠產(chǎn)生額外的任意文件崇败。
4盅称、Plugins(插件)
插件是 wepback 的支柱功能。webpack 自身也是構(gòu)建于后室，你在 webpack 配置中用到的相同的插件系統(tǒng)之上缩膝！
插件目的在于解決 loader 無法實現(xiàn)的其他事。
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通過 npm 安裝
const webpack = require('webpack'); //訪問內(nèi)置的插件
const path = require('path');
const config = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'my-first-webpack.bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
注釋：loaders和rules：loaders一般在webpack1中使用岸霹，rules一般在webpack2中使用疾层，loaders以后會被廢棄，所以還是直接用rules
先寫到這吧贡避，引用來自webpack官網(wǎng)https://webpack.js.org
