Webpack 4.X 從入門到精通 - devServer與mode（三）

時間 2019-11-09

標籤 webpack 4.x 入門精通 devserver mode 简体版

原文原文鏈接

上一篇文章裏詳細介紹了一下插件的用法，這一篇文章接着豐富module.exports裏的屬性。現在的前端發展已經很是迅速了，伴隨而來的是開發模式的轉變。如今已經再也不是寫個靜態頁面並放在瀏覽器裏打開預覽一下了。在實際的開發中會常常須要使用http服務器，好比以前的ajax，想要看到效果就必需搭建一個服務器。搭建服務器的方式有很是的多，而webpack則原生的提供服務器的支持，你們無需再去下載軟件。同時它還提供了自動刷新、熱更新等功能，使開發變得很是方便。javascript

devServer

安裝使用

npm i webpack-dev-server -D

打開終端，並進入到對應的項目裏（個人爲webpack-demo），執行命令webpack-dev-server，若是終端裏顯示以下則表示已經成功開啓服務器
html

注意：
一、此時可能會提示 webpack-dev-server不是內部命令，解決辦法爲在全局再次安裝一下 webpack-dev-server模塊，或者在 package.json裏的 scripts里加上 "dev": "webpack-dev-server"，而後執行命令 npm run dev
二、此時我並無經過 webpack命令生成一個 dist目錄（目錄結構以下圖），而後在瀏覽器裏輸入地址 http://localhost:8080/後，頁面會正常顯示。這個緣由是 devServer會將 webpack構建出的文件保存到內存裏，不須要打包生成就能預覽

配置參數

webpack.config.js的內容以下：前端

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
    entry:{
        index:'./src/index.js',
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].bundle.js'
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'陳學輝',
            template:'./src/template.html',
            filename:'index.html',
        })
    ],
    devServer:{
        host:'localhost',    //服務器的ip地址
        port:1573,    //端口
        open:true,    //自動打開頁面
    }
}

index.js文件內容以下：java

console.log('這是入口文件');

template.html文件內容以下：webpack

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <div id="box">這是自帶的div</div>
    </body>
</html>

執行命令webpack-dev-server後，瀏覽器會自動打開頁面，同時若是修改index.js文件後瀏覽器會自動刷新，以下圖：
web

熱更新

默認狀況下開啓了服務器後，只要入口文件有更新那整個頁面就會從新刷新。若是頁面裏引入的模塊很是多的狀況下讓整個頁面刷新就會變得有些慢，這個問題能夠交給熱更新去解決。熱更新的意思就是隻更新有改動的模塊（像ajax同樣局部刷新）ajax

使用步驟

一、引入webpack模塊npm

const webpack=require('webpack');

二、寫入插件json

plugins:[
    new HtmlWebpackPlugin({
        title:'陳學輝',
        template:'./src/template.html',
        filename:'index.html',
    }),
    new webpack.HotModuleReplacementPlugin()    //引入熱更新插件
]

三、devServer裏增長hot參數segmentfault

devServer:{
    host:'localhost',    //服務器的ip地址
    port:1573,    //端口
    open:true,    //自動打開頁面，
    hot:true,    //開啓熱更新
}

此時並不能看出效果，到後面的文章裏講loader的時候就能夠看出來效果
devServer的其它配置：https://webpack.docschina.org...

mode

mode是webpack4新增的一條屬性，它的意思爲當前開發的環境。mode的到來減小了不少的配置，它內置了不少的功能。相較之前的版本提高了不少，減小了不少專門的配置

提高了構建速度

默認爲開發環境，不須要專門配置

提供壓縮功能，不須要藉助插件

提供SouceMap，不須要專門配置

mode分爲兩種環境，一種是開發環境（development）,一種是生產環境（production）。開發環境就是咱們寫代碼的環境，生產環境就是代碼放到線上的環境。這兩種環境的最直觀區別就是，開發環境的代碼不提供壓縮，生產環境的代碼提供壓縮。

使用方式1：在命令後面添加

webpack --mode development
webpack --mode production

使用方式2：在`package.json`裏添加

"scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development"
  },

此時後成dist目錄用的是生產環境，打開服務器用的是開發環境，而後經過命令執行npm run build或者npm run dev，它們的區別以下
dist目錄裏的index.bundle.js內容以下：

http://localhost:1573/index.bundle.js內容以下：