webpack學習（入門基礎）

時間 2019-11-16

標籤 webpack 學習入門基礎简体版

原文原文鏈接

webpack的學習
webpack是什麼？
1：加載模塊（將JS、sass/less、圖片等做爲模塊來處理使用） 2：進行打包
webpack的優點？
1：webpack以commonJS（JS的規範）的形式寫腳本
2：模塊化（JS、css、圖片等）
3：開發便捷（進行打包、壓縮、圖片轉base64等）
4：擴展性強，插件機制完善javascript

webpack安裝：
1：npm方式安裝：npm install webpack (如果想將項目依賴寫入package.json中，依次執行npm init 和npm install webpack --save--dev,就會在init建立的package.json中看到依賴的模塊）
2：npm info webpack //查看webpack的信息
如果須要使用webpack工具，須要下載server：npm install webpack-dev-server --save-devcss

webpack小例子：
一、建立index.html以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webpack學習</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
二、建立入口的JS：entry.js
document.write('It works.')
三、輸入打包命令：webpack entry.js bundle.js
四、瀏覽器打開index.html（會顯示：It works.），此時bundle.js也被打包建立成功
五、測試多個JS，建立module.js 和module1.js:
module.js: module.exports = 'It works from module.js.'
module1.js: module.exports = 'My name is webpack!'
修改入口entry.js：
document.write('It works.')
document.write(require('./module1.js'))
document.write(require('./module.js'))
再次執行打包命令：webpack entry.js bundle.js
瀏覽器打開index.html就會顯示：It works.My name is webpack!It works from module.js.
如果修改入口entry.js：
document.write(require('./module1.js'))
document.write(require('./module.js'))
document.write('It works.')
執行打包命令後就會顯示：My name is webpack!It works from module.js.It works.
小結：webpack會分析入口文件entry.js，解析包含依賴關係的各個文件，這些文件都會打包到html引入的JS（bundle.js）中。
webpack會給每一個模塊分配一個惟一的ID，經過這個ID索引訪問模塊。頁面啓動的時候，會先執行入口文件entry.js代碼的順序依次加載。html

webpack-----loader（各類模塊css、圖片的處理）
webpack自己只能處理JS模塊，如果須要處理其餘類型的文件（css、圖片之類的），須要用到關鍵字loader
loader須要經過npm命令安裝：npm install css-loader style-loader//css的loader安裝java

loader能夠做爲模塊和資源之間的轉換器,是管道式處理方式，無論最初和中間的形式，
最後返回的必須是javascript，由於是在node環境中執行的。loader是一個函數，接收源文件做爲參數，返回轉換的結果。
就能夠用require來加載任何類型的模塊、文件。
須要注意的是在entry.js中引入須要這麼寫:require("!style!css!./style.css") 執行命令：webpack entry.js bundle.js
require CSS 文件的時候都要寫 loader 前綴（!style!css!），也能夠這樣寫：require("./style.css") 執行命令：webpack entry.js bundle.js --module-bind "css=style!css"node

webpack 操做除了在命令行操做，還能夠經過配置文件來操做。
在工做區間新建一個webpack.config.js，webpack說簡單點就是一個配置文件，主要分爲三個模塊。
entry:入口文件 webpack用哪一個文件做爲入口（本例子中用的是entry.js）
output:出口文件 webpack處理完成的文件放在哪裏（本例子中是bundle.js）
module:模塊要用各類不一樣的模板來處理各類類型的文件（本例子中用的是css）
loaders中test裏面包含一個正則，包含須要匹配的文件
loaders是一個數組，包含要處理這些程序的loaders，這裏咱們用了css和style，注意loaders的處理順序是從右到左的
先運行css-loader而後是style-loade
以下：
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: ['style','css']
}
]
},
//還能夠在配置文件中添加不少插件的配置，能夠是webpack內置的插件也能夠經過npm下載的插件。webpack內置插件的配置
plugins: [
new webpack.BannerPlugin('This file is created by qinbb')//在輸出文件bundle.js中首行代碼就是這句話
]
}webpack

loader 功能
loader 管道：在同一種類型的源文件上，能夠同時執行多個 loader ， loader 的執行方式能夠相似管道的方式，管道執行的方式是從右到左的方式loader 能夠支持同步和異步
loader 能夠接收配置參數web

loader 能夠經過正則表達式或者文件後綴指定特定類型的源文件正則表達式

插件能夠提供給 loader 更多功能npm

loader 除了作文件轉換之外，還能夠建立額外的文件json

webpack 一些命令：
webpack --progress --colors //環境運行包括進度顏色
webpack --progress --colors --watch//開啓監聽模式，沒有變化的模塊會在編譯後緩存到內存中，而不會每次都被從新編譯
webpack-dev-server --progress --colors //須要在全局和工做項目中都下載該包

webpack --display-error-details//方便出錯時能查閱更詳盡的信息

$ webpack --config XXX.js   //使用另外一份配置文件（好比webpack.config2.js）來打包

$ webpack --watch   //監聽變更並自動打包

$ webpack -p    //壓縮混淆腳本，這個很是很是重要！

$ webpack -d    //生成map映射文件，告知哪些模塊被最終打包到哪裏了

//開啓webpack-dev-server服務，http://localhost:8080/webpack-dev-server/ 能夠瀏覽項目中的頁面和編譯後的資源輸出，而且經過一個 socket.io 服務實時監聽它們的變化並自動刷新頁面。實時監聽是有條件的：一、全部的文件在同一個目錄下二、簡單css能夠，可是css預編譯器sass就作不到實時監控webpack --display-error-details//打印錯誤日誌

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。