webpack4入門學習筆記(二)

qfstudy發表於2019-04-21
Web筆記

系列部落格連結

程式碼

下載程式碼：github

html-webpack-plugin的使用

安裝 npm i html-webpack-plugin -D

在webpack4.0入門學習筆記(一)中，我們是自己在打包目錄下建立index.html對打包後js檔案進行引用。

html-webpack-plugin外掛可以根據對應的模板在打包的過程中自動生成index.html，並且能夠對打包的檔案自動引入。

index.html模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>模板</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>
複製程式碼

在webpack.config.js的plugins中配置如下

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports={
  entry: {
    main: './src/index.js'
  },
  //打包完成後檔案存放位置配置
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname,'dist')
  },
  
  plugins: [
    new htmlWebpackPlugin({
      template: './index.html'
    })
  ]
}
複製程式碼

在終端執行npm run start，打包完成後在dist目錄下自動生成index.html檔案，並且還自動引入打包後的其他檔案。

clean-webpack-plugin的使用

每次打包生成的dist目錄，如果改一次程式碼，都得要刪除一次dist目錄，這樣很麻煩，可以通過clean-webpack-plugin在每次打包的時候自動清空dist目錄。

安裝 npm i clean-webpack-plugin -D

在webpack.config.js的plugins中配置如下

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const cleanWebpackPlugin = require('clean-webpack-plugin')

module.exports={
  entry: {
    main: './src/index.js'
  },
  //打包完成後檔案存放位置配置
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname,'dist')
  },
  
  plugins: [
    new htmlWebpackPlugin({
      template: './index.html'
    }),
    new cleanWebpackPlugin()
  ]
}
複製程式碼

entry和output多入口配置

module.exports={
  mode: 'development', //development: 開發環境&emsp;production：生產環境
  entry: {
  &emsp;//多入口
    main: './src/index.js',
    index: './src/index.js'
  },
  //打包完成後檔案存放位置配置
  output: {
    //name與entry物件的屬性對應
    filename: '[name].js',&emsp;//打包成main.js index.js
    path: path.resolve(__dirname,'dist')
  }
}
複製程式碼

當有多入口的時候，需要修改filename的屬性值為'[name].js'，還有其他寫法，具體可以檢視文件。

配置devtool

devtool決定原始碼與打包後的程式碼之間的對映關係，方便對程式碼進行除錯。

開發環境推薦: cheap-module-eval-source-map 生產環境推薦: cheap-module-source-map

devtool具體內容請查閱：文件：devtool

module.exports={
  devtool: 'cheap-module-eval-source-map',
  //開發環境推薦: cheap-module-eval-source-map
  //生產環境推薦: cheap-module-source-map
}
複製程式碼

配置devServer

官網：devServer

安裝webpack-dev-server npm i webpack-dev-server -D

在webpack.config.js中新增以下內容

module.exports={
  devServer: {
    contentBase: './dist',
    // open: true, //自動開啟瀏覽器
    // port: 8080, //預設8080
  }
}
複製程式碼

修改package.json的script

 "scripts": {
    "start": "webpack-dev-server"
  },
複製程式碼

執行npm run start後開啟瀏覽器就可以看到效果，當我們修改程式碼的時候頁面就會重新重新整理。

有時我們希望頁面只更換我們修改的那一部分就可以了，而並不是全部都重新整理一遍，所以需要啟用webpack的熱模組替換功能。

啟用webpack的熱模組替換功能

新增以下內容：

const webpack=require('webpack')

plugins:[
  new webpack.HotModuleReplacementPlugin()
]
 devServer: {
 &emsp;hot: true,&emsp;//啟用webpack的熱模組替換功能
   hotOnly: true&emsp;//hotOnly不是必須的
 }
複製程式碼

完整的配置如下：

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const cleanWebpackPlugin = require('clean-webpack-plugin')
const webpack=require('webpack')

module.exports={
&emsp;plugins: [
    new htmlWebpackPlugin({
      template: './index.html'
    }),
    new cleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: './dist',
    // open: true, //自動開啟瀏覽器
    // port: 8080, //預設8080
    hot: true,&emsp;//啟用webpack的熱模組替換功能
    hotOnly: true //devServer.hot在沒有頁面重新整理的情況下啟用熱模組替換作為構建失敗時的後備
  }
}
複製程式碼

hot:true啟用HotModuleReplacementPlugin（HMR）

通過引入樣式測試

style.css

body{
  background: yellow;
}
div:nth-of-type(odd){
  background: cyan;
}
複製程式碼

index.js

//通過改style.css樣式測試熱模組替換效果
import './style.css'

var btn = document.createElement('button')
btn.innerHTML='新增'
document.body.appendChild(btn)

btn.onclick=function(){
  var div=document.createElement('div')
  div.innerHTML='items'
  document.body.appendChild(div)
}
複製程式碼

執行npm run start，在瀏覽器開啟以後，修改div的背景顏色，只有改變的地方才發生變化，但是頁面並沒有重新整理。

但是在引入js檔案的時候，熱模組替換的實現方式有點區別。

js要達到熱模組替換的效果，得要if(module.hot){}這一部分程式碼，否則就算改了程式碼，頁面不重新整理，修改的地方在頁面上頁面變化。

css樣式因為css-loader已經實現if(module.hot){}這一部分，所以不需要單獨實現這一部分。

index.js

import number from './number'
import add from './add'
add()
number()

if(module.hot){
  module.hot.accept('./add.js',function(){
    add()
    document.getElementById('root').removeChild(document.getElementById('add'))
  })
  module.hot.accept('./number.js',function(){
    number()
    document.body.removeChild(document.getElementById('number'))
  })
}
複製程式碼

add.js

function add(){
  var div=document.createElement('div')
  div.innerHTML=9
  div.setAttribute("id","add")
  let root=document.getElementById('root')
  root.appendChild(div)
}

export default add
複製程式碼

number.js

var number=function(){
  var div=document.createElement('div')
  div.setAttribute("id","number")
  div.innerHTML=1030
  document.body.appendChild(div)
}

export default number
複製程式碼

相關文章