webpack4.0入門學習筆記(二)

系列博客鏈接

代碼

`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: 開發環境　production：生產環境
  entry: {
  　//多入口
    main: './src/index.js',
    index: './src/index.js'
  },
  //打包完成後文件存放位置配置
  output: {
    //name與entry對象的屬性對應
    filename: '[name].js',　//打包成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: {
 　hot: true,　//啓用webpack的熱模塊替換功能
   hotOnly: true　//hotOnly不是必須的
 }

完整的配置如下：

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

module.exports={
　plugins: [
    new htmlWebpackPlugin({
      template: './index.html'
    }),
    new cleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: './dist',
    // open: true, //自動打開瀏覽器
    // port: 8080, //默認8080
    hot: true,　//啓用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

webpack4.0入門學習筆記(二)

`html-webpack-plugin`的使用

`clean-webpack-plugin`的使用

`entry`和`output`多入口配置

配置`devtool`

配置`devServer`

啓用webpack的熱模塊替換功能

通過VuePress管理項目文檔(一)

一行一行手敲webpack4配置

webpack4入門學習筆記(四)--Tree Shaking與拆分配置文件

webpack4入門學習筆記(三)--Babel的使用

webpack4.0入門學習筆記(一)

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

webpack4.0入門學習筆記(二)

html-webpack-plugin的使用

clean-webpack-plugin的使用

entry和output多入口配置

配置devtool

配置devServer

啓用webpack的熱模塊替換功能

`html-webpack-plugin`的使用

`clean-webpack-plugin`的使用

`entry`和`output`多入口配置

配置`devtool`

配置`devServer`