Webpack學(xué)習(xí)過(guò)程及項(xiàng)目使用問(wèn)題及資料整理 -- 2017.11.02
Webpack的簡(jiǎn)介及使用教程
Webpack核心概念：webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成少量的 bundle - 通常只有一個(gè)，由瀏覽器加載。
參考資料網(wǎng)址匯總
- Webpack中文官網(wǎng)
- webpack -- github
- webpack-demos 阮一峰
- [React項(xiàng)目總結(jié)] 基于 webpack 搭建前端工程基礎(chǔ)篇
- webpack 3 & React 的配置
Webpack 打包參數(shù)匯總
- --config webpack.config.js : 指定使用的配置文件
- --progress: 打包進(jìn)度
- --display-modules: 打包的模塊
- --colors: 是否彩色顯示，打包提示信息
- --display-reasons: 打包原因
- --watch: 自動(dòng)監(jiān)控文件變化
- --hot: 開(kāi)啟模塊熱替換
- --define: 定義任意的自由變量: --define process.env.NODE_ENV='development'
- --debug : 把loader設(shè)置為 debug 模式
- --profile: 捕獲編譯時(shí)每個(gè)步驟的時(shí)間信息，并且將這些信息包含在輸出中
- --bail: 一旦發(fā)生錯(cuò)誤，立即終止
- --cache: 開(kāi)啟緩存[watch 時(shí)會(huì)默認(rèn)打開(kāi)]
Webpack 配置及插件匯總
- 核心插件
- common-chunks-webpack-plugin
- html-webpack-plugin
- i18n-webpack-plugin
- compression-webpack-plugin
- extract-text-webpack-plugin
- 推薦插件
- CommonsChunkPlugin
- webpack-bundle-analyzer(BundleAnalyzerPlugin)
- optimize-css-assets-webpack-plugin(OptimizeCssAssetsPlugin)
-
特殊插件
- cross-env 使用cross-env解決跨平臺(tái)設(shè)置NODE_ENV的設(shè)置問(wèn)題
- webpack-monitor 捕獲構(gòu)建生成的，生產(chǎn)環(huán)境中包體關(guān)鍵統(tǒng)計(jì)指標(biāo)，提供了交互式地分析工具，來(lái)幫助開(kāi)發(fā)者更好地審視包體的構(gòu)成，以此來(lái)識(shí)別與選擇可用的優(yōu)化策略。
devtool 模塊簡(jiǎn)介
webpack devtool里的7種SourceMap模式
devtool: "source-map", // or "inline-source-map"
entry 和 output 模塊簡(jiǎn)介
- 一個(gè)入口一個(gè)出口的情況
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
編譯后的文件為 bundle.js
- 多個(gè)入口多個(gè)出口的情況(文件一一對(duì)應(yīng))
module.exports = {
entry: {
bundle1: './main1.js',
bundle2: './main2.js'
},
output: {
filename: '[name].js'
}
};
編譯后的文件為 bundle1.js, bundle2.js
resolve 模塊簡(jiǎn)介
module 模塊簡(jiǎn)介
- js或者jsx文件的處理
module: {
loaders:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react',
},
]
}
- css 文件的處理
module: {
loaders:[
{ test: /\.css$/, loader: 'style-loader!css-loader' },
]
}
- 圖片的處理(jpg、png)，小于8kb(limit可修改為其他)的，轉(zhuǎn)為base64
module: {
loaders:[
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}
plugins 插件模塊簡(jiǎn)介
- var webpack = require('webpack');
- uglifyJsPlugin（webpack.optimize.UglifyJsPlugin）
// js壓縮插件
new uglifyJsPlugin({
compress: {
warnings: false
}
})
- DefinePlugin (webpack.DefinePlugin)
// 設(shè)置webpack默認(rèn)的環(huán)境變量
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
})
執(zhí)行 env DEBUG=true, 修改參數(shù)的值
- CommonsChunkPlugin (webpack.optimize.CommonsChunkPlugin)
// 提取公共部分插件（js,css）
new CommonsChunkPlugin('init.js')
- HtmlwebpackPlugin (html-webpack-plugin) html-webpack-plugin詳解
// html 模板修改插件
new HtmlwebpackPlugin({
title: '標(biāo)題',
template: 'index.html', // 源模板文件
filename: 'index.html' // 輸出文件【注意：這里的根路徑是module.exports.output.path】
}),
- HotModuleReplacementPlugin (webpack.HotModuleReplacementPlugin)
// 熱更新插件
new webpack.HotModuleReplacementPlugin(),
- BundleAnalyzerPlugin （require('webpack-bundle-analyzer').BundleAnalyzerPlugin）
// 圖形化打包結(jié)果顯示
new BundleAnalyzerPlugin(),
- OpenBrowserPlugin (open-browser-webpack-plugin)
// 自動(dòng)打開(kāi)瀏覽器插件，端口號(hào)默認(rèn) 8080
new OpenBrowserPlugin({
url: 'http://localhost:8080'
}),
- BannerPlugin (webpack.BannerPlugin)
//這里是打包文件頭部注釋！
new webpack.BannerPlugin('這是一個(gè)注釋頭')
- LoaderOptionsPlugin (webpack.LoaderOptionsPlugin)
// 去除調(diào)試代碼，壓縮代碼
- CopyWebpackPlugin（copy-webpack-plugin）
// 復(fù)制手動(dòng)引入的資源文件到指定目錄
new CopyWebpackPlugin([
{
from: config.srcPath + '/static',
to: config.outputPath,
ignore: ['.*']
}
])
