webpack的初級配置

1.專案基本的資料夾

2.各資料夾的簡單介紹

開發環境：

webpack ./src/index.js -o ./build/built.js --mode=development

webpack 會以 ./src/index.js 為入口檔案開始打包，打包後輸出到 ./build/built.js整體打包環境，是開發環境，所以不會壓縮**

生成環境：

webpack ./src/index.js -o ./build/built.js --mode=production

webpack 會以 ./src/index.js 為入口檔案開始打包，打包後輸出到 ./build/built.js整體打包環境，是生產環境，會進行壓縮**減少體積大小

webpack.config.js是webpack的配置檔案
作用：指示webpack 幹哪些活（當你執行webpack指令時，會載入裡面的配置）
所有的構建工具都是基於nodejs平台執行的~模組化預設採用common.
js// webpack.config.js
const path =
require
("path"
)const htmlwebpackplugin =
require
('html-webpack-plugin'
)//幫我把js自動引入到html檔案的外掛程式
const
=require
('clean-webpack-plugin'
)//幫我把dist資料夾裡殘留的上次打包的檔案清空
module.exports=
// 輸出口（輸出的名稱和目錄檔案 打包後的檔案放在**）
output:
,// plugins 外掛程式 功能強大
plugins:
[new
htmlwebpackplugin()
,new
htmlwebpackplugin()
,new
cleanwebpackplugin()
幫我把dist資料夾裡殘留的上次打包的檔案清空],
// loader的配置
module:,}
// 為了讓css3樣式相容，需要將某些樣式加上瀏覽器字首
,'less-loader'
]// 從右向左解析原則}]
}}

這時候我們發現css通過style標籤的方式新增到了html檔案中，但是如果樣式檔案很多，全部新增到html中，難免顯得混亂。這時候我們想用把css拆分出來用外鏈的形式引入css檔案怎麼做呢？這時候我們就需要借助外掛程式來幫助我們

npm i -d mini-css-extract-plugin

webpack 4.0以前，我們通過extract-text-webpack-plugin外掛程式，把css樣式從js檔案中提取到單獨的css檔案中。webpack4.0以後，官方推薦使用mini-css-extract-plugin外掛程式來打包css檔案

配置檔案如下

const minics***tractplugin =
require
("mini-css-extract-plugin");
module.exports =]}
,  plugins:
[new
minics***tractplugin()
]}

這裡需要說的細一點,上面我們所用到的mini-css-extract-plugin會將所有的css樣式合併為乙個css檔案。如果你想拆分為一一對應的多個css檔案,我們需要使用到extract-text-webpack-plugin，而目前mini-css-extract-plugin還不支援此功能。我們需要安裝@next版本的extract-text-webpack-plugin

npm i -d extract-text-webpack-plugin@next

// webpack.config.js
const path =
require
('path');
const extracttextwebpackplugin =
require
('extract-text-webpack-plugin'
)let indexless =
newextracttextwebpackplugin
('index.less');
let indexcss =
newextracttextwebpackplugin
('index.css');
module.exports =)}
,)}]
},plugins:
[      indexless,
indexcss]}

// webpack.config.js
module.exports =}}
}]},
}}}]
},}}
}]},]}}

為了使我們的js**相容更多的環境我們需要安裝依賴

npm i babel-loader @babel/preset-env @babel/core

注意babel-loader與babel-core的版本對應關係

babel-loader 8.x 對應babel-core 7.x

babel-loader 7.x 對應babel-core 6.x

配置如下

// webpack.config.js
module.exports =},
exclude:
/node_modules/},]}}

上面的babel-loader只會將 es6/7/8語法轉換為es5語法，但是對新api並不會轉換例如(promise、generator、set、maps、proxy等)

此時我們需要借助babel-polyfill來幫助我們轉換

npm i @babel/polyfill

// webpack.config.js
const path =
require
('path'
)module.exports =
var foo =
'bar'
;

webpack的初級配置

webpack2 webpack的基礎配置

基本的webpack配置

webpack 的命令配置

webpack的初級配置

webpack2 webpack的基礎配置

基本的webpack配置

webpack 的命令配置

相關推薦