Webpack基本配置之plugins篇

plugins能夠在webpack運行到某一時刻的時候幫你作一些事情，和react、vue中的生命週期函數很像。

HtmlWebpackPlugin

1. 安裝

npm install --save-dev html-webpack-plugin
複製代碼

2. 功能

會在打包結束後的這一個時刻自動生成一個html文件，並把打包生成的js自動引入到這個html文件中

3. 使用

// 第一步引入html-webpack-plugin
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'  //'src/index.html'設置的模板
    })
  ],
複製代碼

CleanWebpackPlugin

1. 安裝

npm install --save-dev clean-webpack-plugin
複製代碼

2. 功能

會在項目打包以前將指定的打包目錄刪除

3. 使用

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
  plugins: [
    new CleanWebpackPlugin()
  ]
複製代碼

sourceMap

sourceMap是一個映射關係，他能夠將編譯好的文件和源文件對應起來，方便尋找代碼的錯誤提示

1. 使用

devtool: 'soucre-map'
複製代碼

2. 不一樣的devtool值對應的打包速度和效果不一樣，最佳實踐是：

• 開發環境下配置

mode: 'development',
devtool: 'cheap-module-eval-source-map'
複製代碼

• 線上環境：通常不須要devtool,可是爲了方便定位線上問題，能夠配置：

mode: 'production',
devtool: 'cheap-module-source-map'
複製代碼

• 面試題：sourceMap的原理是什麼？？？

想作到每次修改完代碼，不用在命令行手動輸入指定命令就能夠自動打包

方法一 修改package.json的scripts

"scripts": {
    "watch": "webpack --watch"
  },
複製代碼

這種方法還不夠好，若是想自動實現打包的同時，自動打開瀏覽器，同時模擬服務器上的一些特性

方法二 使用WebpackDevServer

1. 安裝webpack-dev-server

npm install webpack-dev-server -D
複製代碼

2. 增長webpack的配置，在webpack.config.js下作以下修改

devServer: {
    contentBase: './dist'
  }
複製代碼

3. 修改packge.json,增長scrits的內容

"scripts": {
    "watch": "webpack --watch",
    "start": "webpack-dev-server"
  },
複製代碼

4. 此時執行npm run start,每次修改源文件的時候，會自動編譯打包，並刷新頁面

   

5. 若是不想手動訪問8080端口，執行完npm run start自動打開瀏覽器頁面能夠增長以下配置

devServer: {
    contentBase: './dist',
    open:true
  }
複製代碼

爲何要使用WebpackDevServer啓動一個本地服務？

有時候咱們要在前端發起ajax請求，本地直接訪問html頁面是經過file協議打開，是發不了ajax請求的，若是想發送ajax請求，必須使用http協議。