webpack4基礎和vue

前言：為什么要使用webpack：

webpack:簡單來說就是分離、編譯、打包；模塊打包工具；

在使用vue時，我們將HTML,CSS,JS放在同一個.vue文件中，webpack的就可以將這些代碼分離出來，
與其他同類型代碼打包到一起，並轉化為合適的格式供瀏覽器使用

--save-dev和-save的區別：

開發過程中需要的工具或者文件我們 使用 --save-dev 即可,等價於-D；

如果是項目運行必須的文件，那么就使用 --save就好了

全局安裝和在項目內安裝webpack的區別：

     項目內安裝，如果使用npm操作webpack，會出現找不到webpack,是因為總是會從全局去查找，此時，就要使用npx，從當前項目里的node_module中去找webpack;

      如果想使用npm查找webpack,就需要全局安裝webpack,不過此方法會造成多個項目只能用一個版本的webpack；

     總之，項目安裝webpack后用npx，全局安裝后用npm;

webpack起步

--------------------------------------------------

1.首先要創建package.json文件,這個文件就是npm的說明文件，里包括當前項目的依賴模塊，自定義的腳本任務等等

              npm init -y        (-y,使用默認參數創建)   

              

             scripts里面是配置命令:

               例上面：當你運行npm run bundle等價於npx webpack

               使用script里面的命令會現在項目里去找，不用npx,用npm run bundle,也能使用項目安裝的webpack

2.安裝webpack,接着安裝 webpack-cli（此工具用於在命令行中使用 webpack）

             npm install webpack webpack-cli --save-dev 

            webpack不知道怎樣去打包，所以需要創建一個webpack配置文件 webpack.config.js，

            不寫，也會有個默認的配置

            

創建vue

創建vue的文件目錄

然后安裝vue和vue-router:   npm install vue vue-router --save

必須安裝npm install vue-loader --save-dev識別.vue文件

必須安裝npm install css-loader css-loader --save-dev識別vue文件中的<style>標簽里面，不然寫的css會報錯

注意：

 原來這種掛載方式，會報錯

   根本原因，vue安裝后，在dist里面為我們提供了很多的版本，默認情況下是vue.runtime.js,這個版本時不支持new Vue({})里面設置template

 

 如何解決：兩種方法

   方法1.升級新的掛載方式

        

  方法2.在原來掛載的基礎上，在webpack.config.js中module增加

     大概意思就是，vue要使用vue.js完整版

     

 

------------------------------------------------

配置基本的webpack

--------------------------------

創建了配置文件后，就需要配置webpack

四大核心配置：

• 入口(entry)       
• 輸出(output)
• loader
• 插件(plugins)

還有個mode配置，如果不配置，會出現警告，但是不影響打包輸出,會默認production

mode:'development'//開發環境，打包出來的js文件不會被壓縮

mode:'production'//生成環境，js會被壓縮

   entry

entry:流程開始；可以是單文件入口，也可以是多文件入口

               

              上面是簡寫的，實際上是  entry:{ main:'./src/main.js'}

                所以打包輸出時，會告訴入口文件是main

                

            打包多個文件入口例子：[name]是占位符

                   

              打包的結果就是index.html里面引入了main.js和sub.js

                   

 

  output

output: 必須是絕對路徑（使用 Node.js 的 path 模塊，記得要引用）

          打包輸出的文件，不寫，也有個默認的輸出

           

          output還有個常用的配置參數：publicPath;給打包輸出的html文件里面引用的js文件增加前綴

            

           

 

  module

module:模塊配置，主要是loader配置，就是打包方案,只要不是js文件，就要用loader；

         當打包輸出，webpack不知道某類型文件該怎樣打包時，就會從module配置中去找loader,借助loader；

          常用loader：

          1.圖片的打包file-loader:       npm install file-loader --save-dev

                 

         也可以打包字體文件

             

 

                 file-loader也有選項配置，常用是圖片名字輸出配置和輸出路徑配置

                 

                    就將這個文件打包輸出為

                       如果不寫[path]就沒有上下文路徑，這里是src文件件

 

            2.圖片打包url-loader，類似於file-loader,  npm install url-loader --save-dev

                區別：url-loader是將圖片轉換成base64格式，打包到輸出的js中，

                           url-loader就是將file-loader封裝了，作用更大更多；

                優點：減少請求此時；缺點：如果圖片過大，轉換就變慢，加載就有延遲；

                所以，就有參數選項limit

                

           

            3.

                A.  打包css文件css-loader和style-loader ;  npm intall css-loader style-loader --save-dev

               css-loader識別css文件打包，style-loader依賴css-loader打包的文件掛載到文件header中

                

                css-loader必備參數importLoaders:2;

                作用：如果打包的scss文件中有@important url其他的scss文件，就讓引入的這個scss文件再重新從postcss-loader開始執行打包，如果沒有這個參數，就會直接執行css-loader打包，可能造成錯誤；

              不同參數，是從不同loader開始         //2=>'sass-loader''postcss-loader';    1=>'postcss-loader';  0=>'css-loader'

               根據自己的嘗試，scss-loader應該在postcss-loader前面執行才會生效

                

               css-loader必備參數modules:true, 開啟css模塊化，當前模塊引入的樣式只支持當前模塊

                  

                  開啟之后的使用方法，引用css文件，添加私有屬性調用css樣式名

                  例：應用index.scss文件，為img添加文件中class為avatar的樣式

                  

 

                B.  打包scss文件需要sass-loader和node-sass：npm install sass-loader node-sass --save-dev

                注意：sass-loader的使用必須依賴css-loader

                多個loader的執行順序是，從右到左，從下到上

                

                C. 為css3屬性自動添加廠商前綴postcss-loader和它的插件autoprefixer:   npm install postcss-loader autoprefixer --save-dev;

                配置webpack.config.js

                  

                方法一：

                在根路徑下，創建postcss.config.js用來配置postcss,並且設置使用那些插件

                              

                   然后在： 在package.json中增加瀏覽器識別參數，

                     last 100 versions是支持所有瀏覽器最近的100個版本，基本上涵蓋了所有的前綴

                      

                 方法二：

                         都寫在package.json中，目前vue-cli自動構建就是使用的這個

                        

 

 

                     注釋：

                    

 

 

 

            4.使用babel,讓js文件es6語法打包，轉換為es5供低版本瀏覽器運行包

                    npm install --save-dev babel-loader @babel/core

                    注babel-loader只是連接作用：

                    

                      真正的轉化規則是要安裝npm install @babel/preset-env --save-dev

                 options的規則可以在根目錄里創建.babelrc文件來寫

                  

                       但是presets的規則不全，很多es6方法都沒有，這個是時候需要再安裝

                    npm install --save @babel/polyfill    線上和開發都要用--save

                    在打包入口的js文件中引入就可以

                    

                       引入后有個問題，不全的規則會全部引入,打包后會多增加700kb

                    增加一個參數useBuiltIns,js里面需要用的規則才會增加，不會一次全都增加，大大減小體積

                       如果這個參數添加了，就不用在入口js中引入polyfill,雖然不會報錯，但是會出現警告

                       設置useBuiltIns后，就不用import '@babel/polyfill'了，會默認引入的

                        

 

                        經過上面步湊，在業務代碼中es6轉換es5基本實現，但是打包會出現警告，大概意思就是要指定corejs版本

                       安裝npm install --save core-js@2 ，然后再options里增加一個corejs參數就對了

                        

 

            5.vue文件的打包vue-loader：vue必備,      npm install vue-loader vue-template-compiler --save-dev 


              

              !!!注意，這個插件是vue-loader必須的：作用是  定義的其他loader規則也能作用到.vue的文件中

           

              6.html-loader:縮小html體積   npm install  html-loader --save-dev

               ，

               擴展，安裝的html-loader還可以實現引用相同的html部分

              但是，不能在配置里面寫，只能直接在html中寫

              例：公共head存放在html-head.html文件中,通過下面方法引入

              

 

 

 

  plugins

plugins插件讓打包更加的方便：可以在webpack運行到某個時刻時，幫你做些事情

 

        1.插件htmlWebpackPlugin :npm install html-webpack-plugin --save-dev

             打包的文件沒有html文件，每次都需要手動添加一個html太麻煩,插件htmlWebpackPlugin 會在打包結束后，自動生成一個html文件，並把打包的js引入這個html文件中：npm install html-webpack-plugin --save-dev

           但是，生成的html文件沒有可以顯示瀏覽器頁面上的dom結構，就需要配置一個模板，使用參數：template,打包出來的文件就是這個模板的dom結構

             

              

              

              參數擴展：

                   

 

 

           2.插件clean-webpack-plugin:npm install clean-webpack-plugin --save-dev

               每次打包之前都要手動刪除之前打包內容，不方便。這個插件打包之前會自動清掉之前打包文件里面內容，不會緩存，方便刷新；

             中括號必不可少。。。。。

              

                

 

 

  devtool

devtool錯誤映射，打包后出現運行錯誤，能快速精准定位到源代碼上而不是打包后的文件中

         source-map:打包后的js會有一個映射的js文件 xxx.js.map

         inline-source-map:不再多一個map映射文件，而是直接寫在打包js文件里面，精確到行到列

         cheap-inline-source-map:效果和inline-source-map一樣，性能變高，精確到行，只針對業務代碼，不會管第三方庫和loader里面代碼的錯誤

         cheap-module-inline-source-map:效果同上，不過要管第三方庫和loader的錯誤

         eval:通過eavl方式定位錯誤，性能最高，但是復雜情況下，不是特別精確；

         綜合：開發環境下   devtool:'cheap-module-eval-source-map'

                    生成環境下需要找錯誤時才用   devtool:'cheap-module-source-map'

                     

 

  webpackDevServer

 使用webpackDevServer提升開發效率

           常規情況：每次更新業務代碼，都要手動刪除之前打包的文件，再重新打包，刷新，麻煩復雜

                     

 

           1. 方法一：會自動打包，但是還是需要在頁面上手動刷新

                   每次更新業務代碼后，都要手動更新打包，麻煩；

                   在package.json文件中添加--watch;

                    第一次打包通過npm run watch后，再次更新業務代碼后，會自動重新打包，只需頁面刷新就可以了

                     

                    

            2.方法二：改變業務代碼不僅會自動打包，還會自動刷新頁面

                   開啟一個web服務器，默認localhost:8080

                   注意：這個方法打包的文件是隱藏的，適用於開發階段，如果想拿到打包文件，這個方法不行

                   安裝npm install --save-dev webpack-dev-server

                   package.json中添加webpack-dev-server

                    

                    熱模塊配置：允許在運行時更新各種模塊，而無需進行完全刷新

                    開啟熱模塊我們每次改變樣式，頁面中動態添加的html不會因為重新加載而消失，而是直接改變樣式，方便進行css的調試；

                      

                     

                     

                    如果啟動服務器添加--hot,則不需要上面引入插件

                    package.json中：

                      

                     注意，如果不僅添加了--hot，還用了插件，就會Maximum call stack size exceeded錯誤

                     css熱模塊為什么不用下面的寫法，因為css-loader里面已經配置了，vue原理類似

                  但是要想實現js模塊的熱模塊：某個JS模塊更新，頁面就只是刷新更新的js模塊，其他模塊不變

                  

 

                   

                   特別注意 ！！！：

                      熱模塊開啟后，html改變不會刷新，僅CSS，在devServer中添加before：就可以實現刷新

             

devServer: {

    publicPath: '/',

    contentBase: './dist',

    open: true,

    port: 9000,

    /* 解決設置hot后，html更新代碼不刷新 */

     before(app, server, compiler) {

      const watchFiles = ['.html', '.pug'];

      compiler.hooks.done.tap('done', () => {

        const changedFiles = Object.keys(compiler.watchFileSystem.watcher.mtimes);

        if (

          this.hot &&

          changedFiles.some(filePath => watchFiles.includes(path.parse(filePath).ext))

        ) {

          server.sockWrite(server.sockets, 'content-changed');

        } /*  */

      })

    }

  }

 

externals

   externals外部擴展

    不讓某些improt打包，運行時，才從外部獲取的依賴

     例：使用JQ

       index.html中引入JQ

       

     在webpack.config.js中配置

       

    就可以在模塊index.js里面引用

      

 

 

 

 

 

                    

                     

上面就基本上配置了一個webpack,但是對於vue來說，還需要一些如虎添翼的配置

----------------------------------------豐富vue配置--------------------------------

1.px自動轉rem：在sacc-loader執行后執行px2rem-loader

  npm install px2rem-loader --save-dev

 

2.css的模塊化，作用和scoped類似，目的都是讓每個組件的css私有化，參數開啟就執行了

如果想自定義css類名，設置就自動開啟css模塊

 

 

注意：要區分使用了模塊化組件和沒有使用模塊化的組件

 <style module></style>使用css模塊化

<style scoped></style>沒有使用模塊化

 

 

3.webpack輸出時，所有css合並成一個CSS輸出

    npm install -D min-css-extract-plugin

    引入插件並放入plugins中