webpack使用教程

1、webpack的概念

webpack是一個前端工具，可讓各個模塊進行加載、預處理，再進行打包，它有gulp和grunt的大部分基本功能，它的最大區別就是提供了模塊化解決方案，能夠把各類資源做爲模塊來使用和處理。

2、安裝與相關配置（包括打包文件）

注：如下命令在安裝node.js後，在其命令行工具中輸入命令

步驟以下：

一、在要用的webpack的文件夾下初始化npm

命令：npm init

 

命令執行完後，會在該文件夾下產生一個package.json文件

二、初始化完後，使用npm在這個文件下安裝webpack

命令：npm install webpack --save-dev

 

三、在你新建的項目文件夾下建一個新文件，如：index.js

對其進行打包

命令：webpack 打包的文件名 打包後的文件名

如：webpack index.js index.bundle.js

 

四、引入文件

（1）若是須要引入其餘的的js文件，則能夠直接在index.js文件頭部加上代碼：require('./文件路徑及名字.js'),再進行打包就行,即再執行webpack index.js index.bundle.js

（2）引入css文件

方法一：

若是須要引入css文件，則能夠直接在index.js文件頭部加上代碼：require('css-loader!./文件路徑及名字.css'),可是須要先在命令行下引入css-loader和style-loader,再進行打包就行，不然會報錯；

引入css-loader和style-loader的命令：npm install css-loader style-loader --save-dev

補充：

css-loader使得webpack能夠處理.css文件；style-loader使得webpack能夠經過在html文件插入<style>標籤，將css-loader處理完的文件放入<style>標籤裏面；

可是若要將樣式放進style標籤的話，需將index.js文件引入css文件的語句，從require('css-loader!./文件路徑及名字.css')改爲require('style-loade!css-loader!./文件路徑及名字.css')

方法二：

考慮到每次引入css文件都要加上style-loade!css-loader!，過於累贅，能夠直接經過命令行方式一次性引入，那麼每次引入css文件，只須要寫require('./文件路徑及名字.css')便可；

命令以下：webpack index.js index.bundle.js --module-bind 'css=style-loader!css-loader'

若要webpack自動打包，則使用 --watch

命令：webpack index.js index.bundle.js --module-bind 'css=style-loader!css-loader' --watch

若要webpack打包過程，則使用 --progress

若要看webpack打包模快，則使用 --display-modules

若要看webpack爲何要打包這個模快，則使用 --display-reasons

 

五、在項目的根目錄新建webpack的配置文件的webpack.config.js，webpack默認配置文件名爲webpack.config.js，也能夠經過--config來指定配置文件

如下爲個人代碼文件的webpack配置文件

而後直接執行命令：webpack,就會將文件進行打包

還能夠直接在webpack的腳本直接配置參數

打開package.json文件，在scripts裏面添加要配置的參數

而後直接在 命令行運行: npm run webpack ，就能進行打包

 

六、當要對多個文件進行分別打包時，能夠直接在webpack.config.js配置文件裏面配置（代碼實例以下圖），再運行: npm run webpack

運行結果：在./dist/js文件夾下產生

 

七、考慮到每次在.html文件如這些打包後的文件會很麻煩，能夠直接經過webpack帶有的插件html-webpack-plugin自動插入這些腳本文件

安裝插件的代碼：npm install html-webpack-plugin --save-dev

安裝完後，在配置文件中引入該插件，並經過plugins參數來進行,配置代碼以下， 再運行npm run webpack：

另外，webpack還支持在plugins裏面進行相應的傳參

還能夠設置其餘參數（寫出一小部分），new兩個htmlWebpackPlugin是因爲這對兩個不一樣的頁面進行的相關配置，直接上代碼截圖

補充：因爲每次外部連接js文件都要發起一塊兒http請求，這個操做對於性能方面不太友好，全部也能夠選擇直接在html文件裏面插入<script>標籤來插入js代碼，代碼示例以下：

注：上圖中的login，是因爲我獲取的是login對應的js文件的代碼；這裏能夠針對不一樣的js文件，進行相對性的修改

3、幾個核心概念的理解

• Entry：指定webpack開始構建的入口模塊，從該模塊開始構建並計算出直接或間接依賴的模塊或者庫
• Output：告訴webpack如何命名輸出的文件以及輸出的目錄
• Loaders：因爲webpack只能處理javascript，因此須要對一些非js文件處理成webpack可以處理的模塊，好比sass文件
• Plugins：Loaders將各種型的文件處理成webpack可以處理的模塊，plugins有着很強的能力。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量。但也是最複雜的一個。好比對js文件進行壓縮優化的UglifyJsPlugin插件
• Chunk：coding split的產物，咱們能夠對一些代碼打包成一個單獨的chunk，好比某些公共模塊，去重，更好的利用緩存。或者按需加載某些功能模塊，優化加載時間。在webpack3及之前都利用CommonsChunkPlugin將一些公共代碼分割成一個chunk，實現單獨加載。在webpack4 中CommonsChunkPlugin被廢棄，使用SplitChunksPlugin

2、做用

待續

3、優勢

待續