#!相同的key是多選擇的輸入其一即可
var path = require('path');
module.exports = {
entry: "./app/entry", // 單文件打包
entry: ["./app/entry1", "./app/entry2"], //多文件打包成一個
entry: { //多文件單個打包
a: "./app/entry-a",
b: ["./app/entry-b1", "./app/entry-b2"]
},
output: {
path: path.resolve(__dirname, "dist"), // string 所有輸出文件的目標路徑
filename: "bundle.js", // 輸出文件的文件名(固定)
filename: "[name].js", // 用于多個入口點多輸出文件
filename: "[chunkhash].js", // 版本號
publicPath: "/public/", // 指定資源文件引用的目錄
publicPath: "https://cdn.example.com/", // 輸出解析文件的目錄,url 相對于 HTML 頁面
library: "MyLibrary", // string, // 導出庫(exported library)的名稱
libraryTarget: "umd", // 通用模塊定義
libraryTarget: "umd2", // 通用模塊定義
libraryTarget: "commonjs2", // exported with module.exports
libraryTarget: "commonjs-module", // 使用 module.exports 導出
libraryTarget: "commonjs", // 作為 exports 的屬性導出
libraryTarget: "amd", // 使用 AMD 定義方法來定義
libraryTarget: "this", // 在 this 上設置屬性
libraryTarget: "var", // 變量定義于根作用域下
libraryTarget: "assign", // 盲分配(blind assignment)
libraryTarget: "window", // 在 window 對象上設置屬性
libraryTarget: "global", // property set to global object
libraryTarget: "jsonp", // jsonp wrapper// 導出庫(exported library)的類型
},
module: {
// 關于模塊配置
rules: [
// 模塊規則(配置加載器、解析器等選項)
{
test: /\.jsx?$/, // 這里是匹配條件,每個選項都接收一個正則表達式或字符串
include: [ // test 和 include 具有相同的作用,都是必須匹配選項
path.resolve(__dirname, "app")
],
exclude: [// exclude 是必不匹配選項(優先于 test 和 include)
path.resolve(__dirname, "app/demo-files")
]
// 最佳實踐:
// - 只在 test 和 文件名匹配 中使用正則表達式
// - 在 include 和 exclude 中使用絕對路徑數組
// - 盡量避免 exclude,更傾向于使用 include
issuer: { test, include, exclude },// issuer 條件(導入源)
enforce: "pre", //指定 loader 種類。沒有值表示是普通 loader。
enforce: "post",
loader: "babel-loader",
// 應該應用的 loader,它相對上下文解析
// 為了更清晰,`-loader` 后綴在 webpack 2 中不再是可選的
options: {
presets: ["es2015"]
},
// loader 的可選項
},
{
test: "\.html$"
use: [// 應用多個 loader 和選項
"htmllint-loader",
{
loader: "html-loader",
options: {
/* ... */
}
}
]
},
{ oneOf: [ /* rules */ ] }
// 只使用這些嵌套規則之一
{ rules: [ /* rules */ ] }
// 使用所有這些嵌套規則(合并可用條件)
{ resource: { and: [ /* 條件 */ ] } }
// 僅當所有條件都匹配時才匹配
{ resource: { or: [ /* 條件 */ ] } }
{ resource: [ /* 條件 */ ] }
// 任意條件匹配時匹配(默認為數組)
{ resource: { not: /* 條件 */ } }
// 條件不匹配時匹配
],
},
resolve: {// 解析模塊請求的選項(不適用于對加載器(loader)解析)
modules: [
"node_modules",
path.resolve(__dirname, "app")
], // 用于查找模塊的目錄
extensions: [".js", ".json", ".jsx", ".css"], // 使用的擴展名
alias: { // 模塊別名列表
"module": "new-module",
// 起別名:"module" -> "new-module" 和 "module/path/file" -> "new-module/path/file"
"only-module$": "new-module",
// 起別名 "only-module" -> "new-module",但不匹配 "module/path/file" -> "new-module/path/file"
"module": path.resolve(__dirname, "app/third/module.js"),
// 起別名 "module" -> "./app/third/module.js" 和 "module/file" 會導致錯誤
// 模塊別名相對于當前上下文導入
},
},
performance: {
hints: "warning", // 枚舉
maxAssetSize: 200000, // 整數類型(以字節為單位)
maxEntrypointSize: 400000, // 整數類型(以字節為單位)
assetFilter: function(assetFilename) {
// 提供資源文件名的斷言函數
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
devtool: "source-map", // enum
// 通過在瀏覽器調試工具(browser devtools)中添加元信息(meta info)增強調試
// 犧牲了構建速度的 `source-map' 是最詳細的。
context: __dirname, // string(絕對路徑!)
// webpack 的主目錄
// entry 和 module.rules.loader 選項
// 相對于此目錄解析
target: "web", // 枚舉
// 包(bundle)應該運行的環境
// 更改 塊加載行為(chunk loading behavior) 和 可用模塊(available module)
externals: ["react", /^@angular\//],
// 不要遵循/打包這些模塊,而是在運行時從環境中請求他們
stats: "errors-only",
// 精確控制要顯示的 bundle 信息
devServer: {
/* TODO */
},
plugins: [
],
常用webpack 插件
- html-webpack-plugin
自動快速的幫我們生成HTML。
title: 用來生成頁面的 title 元素
filename: 輸出的 HTML 文件名,默認是 index.html, 也可以直接配置帶有子目錄。
template: 模板文件路徑,支持加載器,比如 html!./index.html
inject: true | 'head' | 'body' | false ,注入所有的資源到特定的 template 或者 templateContent 中,如果設置為 true 或者 body,所有的 javascript 資源將被放置到 body 元素的底部,'head' 將放置到 head 元素中。
favicon: 添加特定的 favicon 路徑到輸出的 HTML 文件中。
minify: {} | false , 傳遞 html-minifier 選項給 minify 輸出
hash: true | false, 如果為 true, 將添加一個唯一的 webpack 編譯 hash 到所有包含的腳本和 CSS 文件,對于解除 cache 很有用。
cache: true | false,如果為 true, 這是默認值,僅僅在文件修改之后才會發布文件。
showErrors: true | false, 如果為 true, 這是默認值,錯誤信息會寫入到 HTML 頁面中
chunks: 允許只添加某些塊 (比如,僅僅 unit test 塊)
chunksSortMode: 允許控制塊在添加到頁面之前的排序方式,支持的值:'none' | 'default' | {function}-default:'auto'
excludeChunks: 允許跳過某些塊,(比如,跳過單元測試的塊)
---示例代碼
{
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin(), // Generates default index.html
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'test.html',
template: 'src/assets/test.html'
})
]
}
- css-loader style-loader
樣式文件,我們需要兩種loader,css-loader 和 style-loader,css-loader會遍歷css文件,找到所有的url(...)并且處理。style-loader會把所有的樣式插入到你頁面的一個style tag中。
示例代碼
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders:[
{ test: /\.css$/, loader: 'style-loader!css-loader' },
]
}
};
- babel-loader css-loader style-loader
babel-loader 進行轉碼
示例代碼
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader?presets[]=es2015'
}
]
}
- sass-loader node-sass
css預編譯程序,還需要添加node-sass來解析sass文件
- url-loader
圖片自動轉成base64編碼的
module.exports = {
entry:['./app/entry.js'],
output:{
path:'./build',
filename:'bundle.js'
},
devServer: {//設置開發者工具的端口號
inline: true,
port: 8181
},
module:{
loaders:[
{
test:/\.css$/,
loader:'style!css'
},
{ test: /\.(png|jpg|jpeg|gif)$/,
loader: 'url-loader?limit=8192'
}
/*{
test: /\.(png|jpg|jpeg|gif)$/,
loader: 'url-loader?limit=1000000&name=img/[name].[ext]'
}*/
]
},
plugins:[
new webpack.BannerPlugin('Created by panca on 16/11/25. QQ:643691522')
]
}
- babel-preset-es2015
添加ES6的支持
- autoprefixer-loader
添加瀏覽器前綴
- CommonsChunkPlugin
提取代碼中的公共模塊
new webpack.optimize.CommonsChunkPlugin('common.js'), // 默認會把所有入口節點的公共代碼提取出來,生成一個common.js
- extract-text-webpack-plugin
從bundle中提取出特定的text到一個文件中。使用 extract-text-webpack-plugin就可以把css從js中獨立抽離出來
---示例代碼
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
]
},
plugins: [
new ExtractTextPlugin("styles.css")
]
}
- copy-webpack-plugin
拷貝資源插件
---示例代碼
new CopyWebpackPlugin([{
from: __dirname + '/src/public'
}]),
參數 | 作用 | 其他說明 |
---|---|---|
from | 定義要拷貝的源目錄 | from: __dirname + '/src/public' |
to | 定義要烤盤膛的目標目錄 | from: __dirname + '/dist' |
toType | file 或者 dir 可選 | ,默認是文件 |
force | 強制覆蓋先前的插件 | 可選 默認false |
context | 不知道作用 可選 默認 | base context 可用 specific context |
flatten | 只拷貝文件不管文件夾 | 默認是false |
ignore | 忽略拷貝指定的文件 | 可以用模糊匹配 |
- webpack.ProvidePlugin [webpack內置插件 ]
全局掛載插件
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}))