webpack 是一個模塊打包工具，輸入為包含依賴關系的模塊集，輸出為打包合并的前端靜態資源。
webpack的loader:處理各種需要被處理的靜態文件
webpack支持CommonJs、AMD規范
模塊系統的幾大類型：
<script>標簽類型：
缺點：
全局作用域下造成變量的沖突 文件加載的順序很重要
加載文件越多，網頁失去響應的時間越長
模塊與模塊之間的依賴很重要
在大型項目中難以維護和管理
目前漸漸淡出開發者視野
CommonJs（Nodejs）：
優點：
所有代碼都運行在模塊作用域、不會污染全局作用域
服務端模塊能夠重復利用
模塊可以多次加載，但是只會在第一次加載時運行一次，然后運行結果就被緩存了，以后再加載，就直接讀取緩存結果。要想讓模塊再次運行，必須清除緩存。
模塊加載的順序，按照其在代碼中出現的順序。
有優秀的包管理工具
簡單，上手容易
缺點：
同步加載的
不適合瀏覽器端的使用
不能做到并行加載模塊
AMD（requirejs異步加載，異步模塊定義）：
優點：
適合瀏覽器的異步加載機制
并行加載模塊
缺點：
加載順序不一定，可能會造成一些困擾
代碼難以經營和維護
CMD（seajs，通用模塊定義）：
優點：
只有在使用的時候才會解析js文件
js文件的執行順序是有體現的，是可控的
缺點：
同步執行，執行等待時間會疊加
ES6（import）：
優點：
未來的ES規范
缺點：
瀏覽器對ES6的支持還不完全支持
能夠依賴現有的模塊少
webpack的目標是什么？
1.將依賴的模塊分片化，并且按需加載
2.解決大型項目初始化加載慢的問題
3.每一個靜態文件都可以看成一個模塊
4.可以整合第三方庫
5.能夠在大型項目中使用
6.可以自定義切割模塊的方式
webpack優點：
1.有兩種不同的加載方式
2.loader，加載器可以將其他資源整合到js文件中，通過這種方式，可以吧所有文件打包到一個文件中
3.優秀的語法分析的能力，支持CommonJs、AMD規范
4.有豐富的開源插件庫，可以根據自己的需求自定義webpack的配置
webpack安裝：
npm install webpack -g/--save-dev
webpack實時編譯：
webpack --watch
默認配置文件webpack.config.js改成自定義文件
webpack --config customconfig.js
webpack用法：
一個完整的文件：webpack.config.js
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
module.exports = {
devtool: 'eval-source-map',
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'},
{test: /\.(jpg|png|gif|svg)$/, loader: "url-loader?limit=8192&name=images/[hash:8].[name].[]"}
]
},
entry: {
jquery: ['jquery'],
lodash: ['lodash'],
jstree: ['jstree'],
index: ["./source/page/index"],
designer: './source/cmd/designer'
},
output: {
filename: "./deploy/[name].js"
},
plugins: [
new CommonsChunkPlugin({
name: "./commons",
chunks: ["index", 'designer']
}),
new ExtractTextPlugin("styles.min.css"),
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery": "jquery",
"window.jQuery": "jquery"
})
],
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
port: 8000
}
};
entry:入口文件的配置項，它是一個數組，webpack允許有多個入口點。
output：輸出文件的文件名
1.path——輸出文件的路徑
2.filename——輸出文件的文件名
plugins：給webpack可以添加更多的插件，可以豐富webpack的功能。他有兩種插件：
1.webpack 內置插件（需要安裝webpack模塊）
2.webpack外置插件（需要npm install component-webpack-plugin）
modules：配置文件的處理選項
1.loaders：處理不同文件的加載器
test：用來匹配相對應文件的正則表達式
loaders：告訴webpack要利用那種加載器來處理test所匹配的文件
如下：
DemoOne
|- dist
|- src
|- index.js
|- index.html
|- style.css
|- demo.png(image)
|- package.json
|- webpack.config.js
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
</head>
<body>
<div>Hello,world</div>
<script src="../dist/bundlle.js"></script>
</body>
</html>
style.css:
body{
background:#ddd;
}
配置webpack.config.js:
var path = require('path') //path是node.js內置的package，用來處理路徑的。用于連接路徑。該方法的主要用途在于，會正確使用當前系統的路徑分隔符，Unix系統是/，Windows系統是\
var webpack = require('webpack');
module.exports = {
entry: ['./src/index'],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
},
})
],
module: {
loaders: [{
test: /\.css$/,
loaders: ['style', 'css']
},
{
test: /\.(png|jpg)$/,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}]
}
}
在入口文件引入內容
require（'./style.css'）
require（'./demo.png'）
再次運行，dist文件內會有兩個文件，是webpack打包后的文件。
webpack不僅有單一的入口文件也有多個入口文件，以及多個打包目標。
entry: {
index: ["./source/page/index"],
designer: './source/cmd/designer'
},
output: {
filename: "./deploy/[name].js"
},
最終打包出:
├── index.js
└── designer.js
[name] entry 對應的名稱
[hash] webpack 命令執行結果顯示的 Hash 值
[chunkhash] chunk 的 hash
webpack如何解析JSX和ES6語法？
那就用Babel吧！
在module里面添加：
module: {
loaders: [{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-0', 'react']
}
}]
}
}
強調：.css 文件應用 "style" 和 "css" loader
{
test: /.css$/,
loader: "style-loader!css-loader"
}
webpack其實還有好多插件可以供我們使用。詳細的可以去官網
