webpack的使用

認識webpack

• webpack是一個js模塊打包工具，做用：
• 1.咱們只須要將webpack進行模塊化開發，而後經過webpack來處理模塊間的依賴關係，不只僅是js文件，咱們的css，圖片，json文件等等在webpack中均可以當成模塊來開發
• 2.除了打包文件，webpack還能夠對資源進行處理，好比：壓縮圖片，將scss轉換成css，將ES6語法轉換成ES5，將TypeScript轉換成JavaScript

和grunt/gulpd的對比

• grunt/gulp更增強調的是前端流程的自動化，模塊化不是他的核心
• webpack更增強調的是模塊化開發管理，而文件壓縮合並，預處理等功能，是他附帶的功能
• 若是功能模塊依賴簡單，只須要簡單的合併，壓縮，就使用grunt/gulp便可，若是項目使用了模塊化管理，並且相互依賴強，就使用webpack

webpack的安裝

• 首先，webpack依託於node環境
• npm install @webpack3.6.0 -g （全局安裝）
• cd到對應目錄 npm install @webpack3.6.0 --save-dev （局部安裝）
• 在終端直接執行webpack命令，使用的全局安裝的webpack
• 在package.json中定義了script時，其中包含了webpack命令，那麼使用的是局部webpack

• 準備工做

• 咱們建立兩個文件夾，dist文件夾：用於存放打包以後的文件，src文件夾：用於存放咱們寫的源文件
• package.json文件：經過npm init生成的
• 打包：webpack src/main.js dist/bundle.js
• bundle.js幫咱們直接處理好各類依賴，直接引入index.html文件便可: <script src='./dist/bundle.js'></script>

webpack的配置

1. 入口和出口

• 每次使用webpack的命令都須要寫上入口和出口做爲參數，就很是麻煩，咱們能夠將這兩個參數寫道配置當中，在運行時，直接讀取

• 建立一個webpack.config.js文件
    const path =require('path');
    module.export = {
      //入口：能夠是字符串/數組/對象，這裏咱們入口只有一個，因此寫一個字符串便可
      entry:'./src/main.js'
      //出口：一般是一個對象，裏面至少包含兩個重要屬性，path和filename
      output:{
        path:path.resolve(__dirname,'dist')//注意：path一般是一個絕對路徑
        filename:'bundle.js'
      }
    }

1. package.json中自定義啓動

• 咱們能夠在package.json的script中定義本身的執行腳本
• script會按必定的順序尋找命令對應的位置
  • 首先，會尋找本地的node_modules/.bin路徑中對應的命令
  • 若是沒有找到，會去全局的環境變量中找

  • "script":{
       "build":"webpack"
     }
    
     //如何執行build命令 npm run build

css-loader的使用

1. 什麼是loader

• 在開發中，webpack主要用於處理咱們寫的js代碼，和js之間的依賴，可是其它es6到es5，less到css，vue文件轉成js文件等功能webpack自己作不了，就須要給webpack擴展對應的loder就能夠

1. loader使用過程：

• 經過npm安裝須要的loader
• 在webpack.config.js中的modules關鍵字下進行配置
• 大部分loader咱們均可以在webpack的官網中找到，而且學習對應的用法

1. css文件處理

• 在src目錄下css文件夾中建立一個css文件
• 在入口函數中引入（require（'./css/xxx.css'））
• 單純這樣引入尚未用，須要用npm安裝對應的loader（參照webpack官網），而後在webpack.config.js中的module下的rules中配置好
• 打包css須要兩個loader（css-loader，style-loader），css-loader對應加載css文件，style-loader處理樣式嵌入到文檔中
• npm install style-loader --save-dev --save-dev表示開發時依賴，只在開發時依賴他，若是是下載vue的時候就不須要，由於vue在運行的時候也須要

• const path = require('path')
    module.exports = {
      entry: './src/main.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath:"dist/"   //加上這個屬性，只要涉及url的東西，都會自動在前面拼接上dist/
        },
      module:{
        rules:[
          test: /\.css$/,
          // 使用多個loader時, 是從右向左
          use: [ 'style-loader', 'css-loader' ]
        ]
      }
     }

  less文件處理

1. 建立less文件，放到css文件夾中
2. 在主函數中，用require引入less文件 ：require（'./css/xxx.less'）
3. 在官網中找到less-loader的說明，npm安裝
4. npm install less-loader less --save-dev 咱們不只安裝了loader還安裝了less，由於webpack使用less對less文件進行編譯

• 最後在webpack.config.js中的rules內添加對象選項，用於處理less文件
        {
         test: /\.less$/,
         use: [{
             loader: "style-loader" // creates style nodes from JS strings
         }, {
             loader: "css-loader" // translates CSS into CommonJS
         }, {
             loader: "less-loader" // compiles Less to CSS
         }]
        }

圖片的處理

1. 圖片的處理咱們用url-loader來處理
2. 安裝url-loader，配置webpack.config.js文件

3. {
          loader: 'url-loader',
          options: {
            // 當加載的圖片，小於limit（8kb）時，會將圖片編譯成base64字符串形式
            // 當加載的圖片，大於limit時，須要使用安裝file-loader模塊進行加載
            limit: 8192,
            name:'img/[name].[hash:8].[ext]'
          },
        }

4. 當使用圖片大小大於limit的時候，再次打包會發現dist文件夾下多出來了一個文件，打包後的圖片

5. 爲了處理打包後的圖片，咱們在options中添加以下選項
    1.img：文件要打包到的文件夾
    2.name：獲取圖片原來的名字，放在該位置
    3.hash:8 :爲了防止圖片名稱衝突，依然使用hash，可是咱們保留8位
    4.ext：使用原來的拓展名
    5.eg:`name:'img/[name].[hash:8].[ext]'`

6. 再次打包後，咱們發現圖片仍然沒有顯示出來，是由於圖片使用的路勁不正確

• 默認狀況下，webpack會將生成的路徑直接返回給使用者
• 可是，咱們整個程序是打包在dist文件夾下的，因此咱們須要在路勁下再添加一個dist/ , 在入口配置下添加publicPath：'dist/'

• output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
      publicPath:"dist/"   //加上這個屬性，只要涉及url的東西，都會自動在前面拼接上dist/
    },

webpack配置vue

1. 在開發項目中引入vue ，由於是在實際項目中也會使用vue，全部不是開發時依賴，不須要-dev，npm install vue --save
2. 修改配置以後，打包過程沒有報錯可是瀏覽器報錯

• 這個錯誤說的是咱們使用的是runtime-only版本的vue （後續有runtime-only和runtime-compiler的區別）

• 解決錯誤，在webpack中修改配置：
    resolve:{
      alias:{
        'vue$':'vue/dist/vue.esm.js'
      }
    }

1. 組件化開發引入：

• 在el:'#app'下定義tamplate屬性，在el中定義tamplate，tamplate模板內容會頂替掉掛載的el模板
• 可是書寫tamplate仍然很是麻煩，因此須要咱們在將其抽離，再分紅template,script,style三個結構

1. 引入新的組件化書寫方式

• <template>
      <div>
        <h3>我是cpn組件</h3>
        <h3>{{ name }}</h3>
      </div>
    </template>
  
    <script >
    export default {
      name: "Cpn",
      data() {
        return {
          name:'conaaa'
        }
      },
    }
    </script>
  
    <style  scoped>
    </style>

• 安裝加載器用來處理編譯這個格式的組件npm install vue-loader vue-template-compiler --save-dev

• 修改webpack.config.js文件
    {
      test:/\.vue$/,
      use:['vue-loader']
    }

1. vue-loader在13版本之後使用，還必須配置一個插件，若是不想使用插件，就要將vue-loader換成13或者在更早的版本

plugin(插件)插件的使用

1. plugin和loader的區別

• loader是用於轉換某些類型的模塊，他是一個轉換器
• plugin是插件，是對webpack自己的擴展（打包優化，文件壓縮），是一個轉換器

1. 使用過程：

• 步驟一：經過npm安裝須要的plugin
• 步驟二：在webpack.config.js中配置插件（使用插件時必要要先require引入，如：const HtmlWebpackPlugin=require('html-webpack-plugin')）

打包html的plugin

1. 目前，index.html只存在於開發環境中，可是真實發布項目的時候，發佈的是dist文件夾，咱們須要使用HtmlWebpackPlugin插件將index.html引入到dist文件夾中
2. 這個插件會爲咱們：

• 自動生成一個index.html文件（能夠指定模板）
• 將打包的js文件，自動引入到script標籤當中

1. 安裝HtmlWebpackPlugin插件npm install html-webpack-plugin --save-dev

2. 配置時咱們應該先刪除以前在output中添加的publicPath屬性，不然插入的script標籤中的src會出錯
    plugins:[
      new HtmlWebpackPlugin({
      template:'index.html'
    }),
    ]

js壓縮的plugin

1. 咱們學習時，使用uglifyjs-webpack-plugin插件，版本號指定1.1.1，和Cli2保持一致
2. 引入以後，再在plugins中配置使用new uglifyjsWebpackPlugin()

搭建本地服務器

1. webpack提供了一個可選的本地開發服務器，這個本地服務器基於node.js搭建，內部使用express框架，能夠實現咱們想要的讓瀏覽器自動刷新
2. 他是一個單獨的模塊，在webpack中使用須要先安裝他npm install --save-dev webpack-dev-server@2.9.1
3. devserver也是做爲webpack中的一個選項，選項自己能夠設置以下屬性：

• contentBase：爲哪個文件夾提供本地服務，默認時根文件夾（./dist）
• port:端口號
• inline：頁面實時刷新
• historyApFallback：在SPA頁面中，依賴HTML5的history模式

1. 在webpack.config.js中的文件配置
      devServer:{
        contentBase:'./dist',
        inline:true,
      }

2. 在package.json文件中設置npm命令
      "scripts": {
        "dev":"webpack-dev-server --open"
      }
    --open：直接打開瀏覽器（能夠不加）

webpack配置的分離

1. 爲何要將webpack配置分離？

• 當咱們生產和開發的配置須要的每每都是不同的，一般配置會放在一塊兒
• 好比咱們想在預覽編譯的時候並不將js文件壓縮，這樣方便咱們進行調試，而在生產的時候，也不須要預覽配置
• 咱們能夠將配置文件分紅三份，一份提取公共的配置文件（base.config.js），一份開發所需配置（dev.confog.js）,一份生產所需配置（pod.config.js）,而後在編譯時用webpack工具模塊（npm install webpack-merge --save-dev）將配置兩兩組合，就實現了webpack配置分離

• 舉例：
    const uglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin')
    const webpackMerge=require('webpack-merge')
    const baseconfig=require('./base.config')
  
    module.exports = webpackMerge(baseconfig,{
      plugins:[
        new uglifyjsWebpackPlugin()
      ],
    })

1. 分離時需注意的幾個點

• 在package.json中設置script腳本命令的時候須要注意，已經沒有webpack.config.js文件了，webpack實現不了自動尋找，咱們須要自行配置

• "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack --config ./build/prod.config.js",
     "dev": "webpack-dev-server --config ./build/dev.config.js"
   }

• 在原來的配置中，用絕對路勁設置了編譯的路勁，隨着配置文件的路勁更改，編譯的路勁也應該修改（在base.config.js配置文件中的出口（output）中修改）