webpack用法小結
一、webpack是什麼
根據文檔的定義：本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。css
二、webpack四個核心概念
- 入口(entry) 入口，webpack 執行構建的第一步將從 Entry 開始，可抽象成輸入
- 輸出(output) 輸出結果，在 Webpack 通過一系列處理並得出最終想要的代碼後輸出結果
- 加載器(loader) 模塊轉換器，用於把模塊原內容按照需求轉換成新內容。
- 插件(plugins) 擴展插件，在 Webpack 構建流程中的特定時機會廣播出對應的事件，插件能夠監聽這些事件的發生，在特定時機作對應的事情。
2.1entry
- 定義的三種方法
第一種用法
module.exports = {
entry:'index.js'
}
第二種用法
module.exports = {
entry:['index.js','b.js']
}
第三種用法
module.exports = {
entry:{
index:'index.js',
b:'b.js'
}
}
複製代碼
推薦使用使用第三種方法，方便分清各個入口的定義html
2.2output
- 打包成的文件
- 一個或多個
module.exports = {
entry:{
index:'index.js',
b:'b.js'
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].min.[hash:5].js'
}
}
複製代碼
在上面的例子中，node
- output中的name和entry中的key相對應
- output的filename能夠指定hash。有兩個值能夠選擇：
- [hash]：hash值是特定於整個構建過程的。
- [chunkhash]：hash值是特定於每個文件的內容的。
咱們理想的緩存設計是，在一次版本更新(從新構建)後，只有當一個文件的內容確實發生了變化，它才須要被從新下載，不然應使用緩存。 所以，以上兩個值中更推薦的是[chunkhash]。你也能夠閱讀這篇官方的緩存指南瞭解更多細節。
2.3loader
- 做用： 經過使用不一樣的Loader，Webpack能夠要把不一樣的文件都轉成JS文件,好比CSS、ES6/七、JSX等
- 參數
- test：匹配處理文件的擴展名的正則表達式
- use：loader名稱，就是你要使用模塊的名稱
- include/exclude:手動指定必須處理的文件夾或屏蔽不須要處理的文件夾
- query：爲loaders提供額外的設置選項 下面以css-loader爲例
module: {
+ rules:[
+ {
+ test:/\.css$/,
+ use:['style-loader','css-loader'],
+ include:path.join(__dirname,'./src'),
+ exclude:/node_modules/
+ }
+ ]
},
複製代碼
- 經常使用的loader
- 編譯相關
babel-loader ts-loader - 樣式相關 style-loader css-loader less-loader postcss-loader
- 文件相關 file-loader url-loader
- 編譯相關
2.4plugins
- 參與打包的整個過程
- 打包優化和壓縮
- 配置編譯時的變量
- 用法(以壓縮js插件爲例)
module.exports = {
plugins: [
new UglifyjsWebpackPlugin()
]
}
複製代碼
- 經常使用的plugin
- 優化相關
- CommonsChunkPlugin
- UglifyjsWebpackPlugin
- 功能相關
- ExtractTextWebpackPlugin
- HtmlWebpackPlugin
- HotModuleReplacementPlugin
- CopyWebpackPlugin
- 優化相關
三、wbpack的經常使用配置
3.1配置開發服務器
npm i webpack-dev-server -D
複製代碼
+ devServer:{
+ contentBase:path.resolve(__dirname,'dist'),
+ host:'localhost',
+ compress:true,
+ port:8080
+ }
複製代碼
- contentBase 配置開發服務運行時的文件根目錄
- host：開發服務器監聽的主機地址
- compress 開發服務器是否啓動gzip等壓縮
- port：開發服務器監聽的端口
3.2自動產出html
npm i html-webpack-plugin -D
複製代碼
plugins: [
+ new HtmlWebpackPlugin({
+ minify: {
+ removeAttributeQuotes:true
+ },
+ hash: true,
+ template: './src/index.html',
+ filename:'index.html'
})]
複製代碼
- minify 是對html文件進行壓縮，removeAttrubuteQuotes是去掉屬性的雙引號
- hash 引入產出資源的時候加上哈希避免緩存
- template 模版路徑
3.3分離css
由於CSS的下載和JS能夠並行，當一個html文件很大的時候，咱們能夠把css單獨提取出來react
npm install --save-dev extract-text-webpack-plugin
複製代碼
module: {
+ rules:[
+ {
+ test:/\.css$/,
+ use: ExtractTextWebpackPlugin.extract({
+ use:'css-loader'
+ }),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
+ }
+ ]
},
plugins: [
+ new ExtractTextWebpackPlugin('css/index.css')]
複製代碼
3.4編譯less 和 sass
npm i less less-loader -D
npm i node-saas sass-loader -D
複製代碼
const cssExtract=new ExtractTextWebpackPlugin('css.css');
const lessExtract=new ExtractTextWebpackPlugin('less.css');
const sassExtract=new ExtractTextWebpackPlugin('sass.css');
{
test:/\.less$/,
use: lessExtract.extract({
use:['css-loader','less-loader']
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
{
test:/\.scss$/,
use: sassExtract.extract({
use:['css-loader','sass-loader']
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
複製代碼
3.5處理CSS3屬性前綴
爲了瀏覽器的兼容性，有時候咱們必須加入-webkit,-ms,-o,-moz這些前綴webpack
-
Trident內核：主要表明爲IE瀏覽器, 前綴爲-msgit
-
Gecko內核：主要表明爲Firefox, 前綴爲-mozgithub
-
Presto內核：主要表明爲Opera, 前綴爲-oweb
-
Webkit內核：產要表明爲Chrome和Safari, 前綴爲-webkit正則表達式
npm i postcss-loader autoprefixer -D 複製代碼
module.exports={
plugins:[require('autoprefixer')]
}
{
test:/\.css$/,
use: cssExtract.extract({
+ use:['css-loader','postcss-loader']
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
複製代碼
postcss-loader其它用法能夠參考文檔npm
3.6轉義ES6/ES7
Babel實際上是一個編譯JavaScript的平臺,能夠把ES6/ES7,React的JSX轉義爲ES5
npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react -D
複製代碼
{
test:/\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ["env","stage-0","react"]
}
},
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
複製代碼
3.7調試打包後的代碼
webapck經過配置能夠自動給咱們sourcemaps文件，map文件是一種對應編譯文件和源文件的方法
- source-map 把映射文件生成到單獨的文件，最完整最慢
- cheap-module-source-map 在一個單獨的文件中產生一個不帶列映射的Map
- eval-source-map 使用eval打包源文件模塊,在同一個文件中生成完整sourcemap
- cheap-module-eval-source-map sourcemap和打包後的JS同行顯示，沒有映射列
module.exports = {
devtool:'eval-source-map'
}
複製代碼
3.8watch
當代碼發生修改後能夠自動從新編譯
new webpack.BannerPlugin(''),
watch: true,
watchOptions: {
ignored: /node_modules/, //忽略不用監聽變動的目錄
aggregateTimeout: 500, //防止重複保存頻繁從新編譯,500毫米內重複保存不打包
poll:1000 //每秒詢問的文件變動的次數
},
複製代碼
3.9拷貝靜態文件
有時項目中沒有引用的文件也須要打包到目標目錄
npm i copy-webpack-plugin -D
複製代碼
new CopyWebpackPlugin([{
from: path.join(__dirname,'public'),//靜態資源目錄源地址
to:'./public' //目標地址，相對於output的path目錄
}]),
複製代碼
3.10打包先清空
npm i clean-webpack-plugin -D
複製代碼
new cleanWebpaclPlugin(path.join(__dirname,'dist'))
複製代碼
3.11壓縮js /css
-
壓縮JS可讓輸出的JS文件體積更小、加載更快、流量更省，還有混淆代碼的加密功能 npm i uglifyjs-webpack-plugin -D plugins: [ new UglifyjsWebpackPlugin(),
-
webpack能夠消除未使用的CSS，好比bootstrap中那些未使用的樣式
npm i -D purifycss-webpack purify-css npm i bootstrap -S 複製代碼
{
test:/\.css$/,
use: cssExtract.extract({
use: [{
loader: 'css-loader',
+ options:{minimize:true}
},'postcss-loader']
}),
},
複製代碼
+ new PurifyCSSPlugin({
+ //purifycss根據這個路徑配置遍歷你的HTML文件，查找你使用的CSS
+ paths:glob.sync(path.join(__dirname,'src/*.html'))
+ }),
複製代碼
四、總結
以上是webpack核心概念總結，對概念的理解，有助於整體瞭解下webpack不一樣的做用，遇到相關問題，找對應的模塊。
複製代碼
相關文章
- 1. webpack用法總結
- 2. Webpack的使用指南-Webpack小結
- 3. webpack小結
- 4. html-webpack-plugin用法總結
- 5. webpack進階用法總結
- 6. webpack 多頁面應用配置小結
- 7. webpack 性能優化小結
- 8. webpack使用小記
- 9. git用法小結
- 10. ROW_NUMBER 用法小結
- 更多相關文章...
- • Rust 結構體 - RUST 教程
- • XML 樹結構 - XML 教程
- • 算法總結-回溯法
- • 算法總結-廣度優先算法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. webpack用法總結
- 2. Webpack的使用指南-Webpack小結
- 3. webpack小結
- 4. html-webpack-plugin用法總結
- 5. webpack進階用法總結
- 6. webpack 多頁面應用配置小結
- 7. webpack 性能優化小結
- 8. webpack使用小記
- 9. git用法小結
- 10. ROW_NUMBER 用法小結