webpack

一：webpack是什么
本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。

二：webpack的作用
webpack用來將項目中的各個引用模塊進行打包封裝。由于瀏覽器只能識別特定的js，html，css，當項目使用到了其他瀏覽器不能識別的語言時，webpack的作用就是將某種語言翻譯成為瀏覽器可以識別的語言。另外一個作用就是，項目文件引入了一些其他資源，webpack可以將它整和到目標文件中，例如import引入的一些文件，引入的文件是怎么在項目中產生作用的呢？就是通過webpack 將文件整和到一個文件中，使一些離散的文件得到整和從而產生作用。

三：webpack的幾個核心知識點
1，webpack都是從起點文件index.js開始打包的，這樣的打包結構類似于樹型結構，通過遍歷使每一個引用文件都得到打包或翻譯打包，所以只有在index.js中或者項目樹型結構中引用了文件才可。
2，webpack中的webpack.config.js配置文件
這個文件就是webpack的配置文件，webpack自身只能將js，json文件進行打包，而對css,less,sass,jpg,png,gif,字體樣式，其他語言webpack是不支持的，但是可以通過給webpack配置一些功能，可以使的webpack可以處理打包這樣的文件。每聲明一種打包功能都必須在webpack.config.js文件中進行配置聲明。（所以webpack大部分代碼都是在webpack.config.js文件中編寫）
3，webpack.config.js配置文件中的幾個重要部分

下面介紹幾個核心基礎功能
entry：打包入口起點
1：string --》./src/index.js
單入口
打包形成一個chunk，輸出一個bundle文件
當沒有指定文件輸出名字時，默認是main
2：array --》[ ‘./src/index.js’,’./src/add.js’]
多入口
所有文件最終只會形成一個chunk，輸出一個bundle文件
就是數組里面的js文件會合并成為一個js文件輸出
3：objeck --》{}
多入口
有幾個文件就生成幾個chunk，輸出幾個bundle文件
此時chunk文件名為key值

–特殊用法（object和array聯用）
{
index:[’./src/index.js’,’./src/count.js’],
add:’./src/add.js’
}

output :輸出
filename：輸出文件名或者目錄下文件名
path：輸出的公共文件路徑

loader：loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對它們進行處理。
module:{
rules:{//配置執行的循序是從左往右，從下往上
test:/.js$/,
//排除一下文件
exclude:/node_modules/,
//只檢查該目錄下面的文件
include:resolve(__dirname,‘src’),
//優先執行
enforce:‘pre’,
//延后執行
enforce:‘post’,
loader:‘eslint-loader’
}
{
//以下配置只匹配一個
oneOf:[]
}

plugins：插件功能，是對loader的一種完善，能夠處理loader不能處理的一些功能 ，使用：想要使用一個插件，你只需要 require() 它，然后把它添加到 plugins 數組中。多數插件可以通過選項(option)自定義。你也可以在一個配置文件中因為不同目的而多次使用同一個插件，這時需要通過使用 new 操作符來創建它的一個實例。

mode：模式
項目開發有兩種模式，一種是開發模式（development），另外一種就是生產模式（production），開發模式就是用來編寫代碼，打包后沒有對代碼進行壓縮，生產模式是對代碼進行了壓縮，并對一些功能進行了優化。

注意：
//兩種外部配置使用方法：
loader：1，下載（npm） 2，應用
plugin：1，下載（npm） 2，引入 3，應用

實例：

//利用node 中的模塊獲得絕對路徑 const {resolve}=require('path'); //將插件引入 const HtmlWebPackPlugin=require('html-webpack-plugin')module.exports={entry:'./src/index.js',output:{//打包后的文件名filename:'built.js',//打包后文件的路徑path:resolve(__dirname,'build')},module:{rules:[//詳細的loader配置,處理一種情況，就得添加一個相對應的對象{test:/\.css$/,//當需要依賴多個loader時使use數組，只需要使用一個時使用loader標簽use:[//創建一個style標簽，將js中的樣式資源插入并添加到head標簽中'style-loader',//將css文件變成commonjs模塊加載到js中，里面的內容是樣式字符串'css-loader']},{test:/\.less$/,use:['style-loader','css-loader','less-loader']}]},plugins:[//插件配置new HtmlWebPackPlugin({//打包html文件，并以template下的html文件為模板生成一個引入了打包后的js文件的html文件template:'./src/index.html'})],//指示打包為開發環境打包mode:'development' }

總結

以上是生活随笔為你收集整理的webpack(1)-简介和基础知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。