風尚學Webpack-基礎篇核心概念（2）_風尚云網-CSDN博客風尚學Webpack-基礎篇核心概念（2）https://blog.csdn.net/zsx0806/article/details/122198850
圖片來自webpack官網logo
目錄
loader的一些方法：
插件：
html-webpack-pluginhtml模板插件
命令script：
webpack 如何優化專案
別名
靜態目錄
webpack搭建一個vue腳手架cli
多入口打包
跨平臺傳遞參
cross-env:
webpack 如何指定組態檔
webpack-merge 配置抽離方法
附：webpack優化圖
loader的一些方法：
css-loader- 處理css檔案 style-loader-把css插入到header
less-loader-處理.less MiniCssExtractPlugin.loader-壓縮抽出css-loader
file-loader-處理檔案，圖片 url-loader-當檔案比較小轉成base64（減少一http請求）
image-webpack-圖片壓縮
插件：
html-webpack-plugin
html模板插件
命令script：
“script”:{
"build":"webpack"，
“serve”:"webpack serve"
}
webpack 如何優化專案
css優化壓縮 css-minimizer-webpack-plugin
圖片優化 image-webapck壓縮圖片 file-loader base64格式
js優化壓縮
optimization: {
minimizer: [
new CssMinimizerPlugin(),
new TerserWebpackPlugin(),
]},devtool與sourceMap:
devtool: "source-map", // enum
devtool: "inline-source-map", // 嵌入到源檔案中
devtool: "eval-source-map", // 將 SourceMap 嵌入到每個模塊中
devtool: "hidden-source-map", // SourceMap 不在源檔案中參考
devtool: "cheap-source-map", // 沒有模塊映射(module mappings)的 SourceMap 低級變體(cheap-variant)
devtool: "cheap-module-source-map", // 有模塊映射(module mappings)的 SourceMap 低級變體
devtool: "eval", // 沒有模塊映射，而是命名模塊，以犧牲細節達到最快，
// 通過在瀏覽器除錯工具(browser devtools)中添加元資訊(meta info)增強除錯
// 犧牲了構建速度的 `source-map' 是最詳細的，
異步加載 import(xxx).then()
預加載 import(/* webpackPrefetch: true */ 'jquery')
hash命名 hash
chunkhash 如果入口發生變化就會發生變化
contenthash 如果內容發生變化名稱發生變化
搖樹 tree shaking
按需匯入js 借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小專案體積的目的，
代碼分包 splitChunks
optimization: {
splitChunks: {
chunks: "all",
// 所有的 chunks 代碼公共的部分分離出來成為一個單獨的檔案},
}, 別名
resolve: {
alias: {
'@': path.resolve(__dirname, './src'), //設定@為src目錄的別名
}
},靜態目錄
new CopyWebpackPlugin( // 設定靜態目錄（拷貝檔案到另外一個檔案夾）
{patterns:[
// { from: __dirname+'/public', to: __dirname+'/dist' },
//from 從， to 到 __dirname 當前目錄
{ from: __dirname+'/src/static', to: __dirname+'/dist/static' },
],
}),webpack搭建一個vue腳手架cli
安裝依賴：vue源檔案 vue npm i Vue -S
vue npm i Vue -S2.處理.vue檔案 vue-loader
vue-loader3.處理vue樣式 vue-style-loader
vue-style-loader
4.編譯template模板檔案 vue-template-compiler
vue-template-compiler5.熱更新vue-hot-reload-api
vue-hot-reload-api
webpack // 匯入vue插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 實體化vue插件
new VueLoaderPlugin(),配置
loader
{ //vue 決議
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: { //開發環境使用style-loader打包
css: ['style-loader', 'css-loader'],
less: ['style-loader', 'css-loader', 'less-loader']
}
}
},多入口打包
入口：
entry: {
vue: './src/main.js',
base: './src/index.js'
},new HtmlWebpackPlugin({
// 指定模板檔案
filename: 'index.html',
template: './public/index.html',
chunks: ['vue'], //指定vue入口打包進來
}),
new HtmlWebpackPlugin({
filename: 'base.html',
template: './public/base.html',
chunks:['base'], //指定base入口打包
}),跨平臺傳遞參
cross-env:
package.json
"build": "cross-env NODE_ENV=production webpack",
"serve": "cross-env NODE_ENV=development webpack serve",獲取
process.env.NODE_ENV
作用：根據不同的引數可以切換不同的配置項切換環境
webpack 如何指定組態檔
Webpack 在執行的時候，除了在命令列傳入引數，還可以通過指定的組態檔來執行，默認情況下，會搜索當前目錄的 webpack.config.js 檔案，這個檔案是一個 node.js 模塊，回傳一個 json 格式的配置資訊物件，或者通過 --config 選項來指定組態檔，
webpack-merge 配置抽離方法
webpack-merge可以幫助我們引入公共配置進入dev和prod
//安裝
npm install webpack-merge -DWebpack-merge 提供了一個函式，該函式將陣列串聯并合并創建新物件的物件，如果遇到函式，它將執行它們，通過演算法運行結果，然后再次將回傳的值包裝在函式中
語法：
// 默認的方式
const output = merge (object1, object2, object3, ...);
// 陣列物件
// 這適用于所有可用的功能，
const output = merge ([object1, object2, object3]);
// 右邊優先
const output = merge (
{ fruit: "apple", color: "red" },
{ fruit: "strawberries" }
);
學習累了就來風尚云網：風尚云網風尚云網提供了編程的基礎技術游戲, HTML、CSS、Javascript等各種小游戲，也提供了強大的在線搜索功能，實用，有趣
http://www.fengshangyunwang.cn/
附：webpack優化圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/397386.html
標籤：其他
上一篇：vue--webpack打包
下一篇：初識javaScript(一)