webpack-dev-server：開發服務器

在開發階段，我們希望把最終的代碼和頁面部署到服務器上來調試是否有bug，如果我們的代碼不能實現熱加載的話，那會對開發效率產生極大的影響，我們所有的時間，可能都浪費在打包、運行、調試過程了。

webpack-dev-server就是一個熱加載的模擬服務器。

我們要使用webpack-dev-server，先要安裝

npm install --D webpack-dev-server

我們通過執行webpack-dev-server命令，來運行服務器。webpack-dev-server命令幾乎支持所有的webpack命令參數，如--config、-env等等，你可以把它當作webpack命令使用

webpack-dev-server --open
# --open 運行時打開瀏覽器

其實webpack-dev-server的運行原理非常簡單：

內部執行webpack命令，傳遞命令參數
開啓watch監聽
註冊hooks：註冊一些鉤子函數，用於將資源列表（aseets）保存起來和禁止webpack輸出文件
用express開啓一個服務器，監聽某個端口（通過配置設置。默認80），當請求到達後，根據請求的路徑，給予相應的資源內容

webpack-dev-server的配置。

具體配置查看官方文檔：https://www.webpackjs.com/configuration/dev-server/

module.exports = {
   mode:"development",
   devServer:{
       port:3000,
       open:true,
       proxy: {
          '/api': {
            target: 'http://localhost:8081', 
            changeOrigin: true //修改請求頭中的host,origin
          },
       }
   }
}

解釋：

port：配置監聽端口
open：是否自動打開瀏覽器
proxy：配置代理，當我們訪問的地址中帶有api路徑，就會跳轉到代理中的目標地址，常用於跨域訪問，配合後臺使用。

我整理了幾個webpack進行項目開發時常用的插件和常用的loader。

webpack常用插件

具體的使用請查看官網：https://www.npmjs.com/

1、clean-webpack-plugin

clean-webpack-plugin：清除輸出目錄

npm install --save-dev clean-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    plugins: [
        new CleanWebpackPlugin(),
    ]
}

2、html-webpack-plugin

html-webpack-plugin：生成html文件的插件

npm i --save-dev html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template:"./public/index.html" //可以指定模板html，也可以使用默認的
        }),
    ]
}

3、copy-webpack-plugin

copy-webpack-plugin：複製文件的插件，複製靜態資源

npm install --save-dev copy-webpack-plugin

const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
  plugins: [
    new CopyPlugin([
      { from: 'source', to: 'dest' },
      { from: 'other', to: 'public' },
    ]),
  ],
};

綜合使用一下

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
    output:{
        filename:"[name].[hash:5].js"
    },
   plugins:[
       new CleanWebpackPlugin(),
       new HtmlWebpackPlugin({
            //指定模板html文件 
           template:"./public/index.html"
       }),
       new CopyPlugin([
               {from:"./assets",to:"./assets"}
           ]
       )
   ]
}

4、bundle analyzer

bundle analyzer：對bundle進行分析，直觀的顯示各個bundle文件的大小，以達到優化性能的目的

npm i -D webpack-bundle-analyzer

const WebpackBundleAnalyzer = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = {
  mode: "production",
  plugins: [
  	new WebpackBundleAnalyzer()
  ]
};

5、compression-webpack-plugin

compression-webpack-plugin：使用gzip方式對文件進行預壓縮

npm i -D compression-webpack-plugin

const compressionWebpackPlugin = require("compression-webpack-plugin")
module.exports = {
  mode: "production",
  plugins: [
    new compressionWebpackPlugin({
      test: /\.(js)|(css)$/,
      threshold: 10240, //超過多少字節進行壓縮
      minRatio: 0.8 //至少壓縮到原來體積的0.8,纔會進行壓縮
    })
  ]
};

webpack常用loader

1、file-loader

file-loader: 生成依賴的文件到輸出目錄，生成的文件會導出一個路徑。採用export default "文件名"方式導出。

如果我們在某個js通過require導入圖片，require無法對圖片進行語法解析，打包時會報錯，但是我們又要使用這個圖片，那麼我們就需要通過file-loader對圖片進行處理。


/*----------假如我們在某個js中使用圖片----------*/
const png = require("../assets/test.png").default //通過require導入圖片，導出時用默認導出
let img = document.getElementsByTagName("img")[0]
img.src = png

/*----------webpack.config.js----------*/
module:{
    rules:[
        {
            test:/\.(png)|(jpg)$/,
            use:[{
                loader:"file-loader",
                options:{
                    name: '[name].[ext]',
                }
            }]
        }
    ]
}

2、url-loader

url-loader：將依賴的文件轉換爲：導出一個base64格式的字符。export default "base64編碼"

module:{
        rules:[
            {
                test:/\.(png)|(jpg)$/,
                use:[{
                    loader:"url-loader", 
                    options:{
                        limit:100*1024, //如果設置了大小，超出改範圍就會自動轉交給file-loader進行處理
                        name: 'imgs/[name].[ext]',//設置file-loader的輸出目錄文件
                    }
                }]
            }
        ]
    },

url-loader中引入了file-loader，當限制大小的時候，超出限制會自動使用file-loader進行處理。

3、css-loader

css-loader：將css代碼轉換爲js代碼。它的處理原理極其簡單：將css文件的內容作爲字符串導出。然後將css中的其他依賴作爲require導入，以便webpack分析依賴

例如：我們的css代碼是這樣的

@import "./reset.css";
.red{
    color:"#f40";
    background:url("./bg.png")
}

經過css-loader處理以後，它會把代碼轉換爲這樣。具體轉換過程可以去看源碼（只是類似轉換後的，有出入）

var import1 = require("./reset.css");
var import2 = require("./bg.png");
module.exports = `.red{
    color:"#f40";
    background:url("${import1}")
}`;

使用css-loader：

module:{
	rules:[
		{test:/\.css$/,use:"css-loader"}
	]
}

4、style-loader

style-loader：因爲css-loader僅提供了將css轉換爲字符串導出的能力，style-loader可以將css-loader轉換後的代碼進一步處理，將css-loader導出的字符串加入到頁面的style元素中

例如：

.red{
    color:"#f40";
}

經過css-loader轉換後變成js代碼：

module.exports = `.red{
    color:"#f40";
}`

經過style-loader轉換後變成：（非真實轉換代碼，只是模擬一下）

module.exports = `.red{
    color:"#f40";
}`
var style = module.exports;
var styleElem = document.createElement("style");
styleElem.innerHTML = style;
document.head.appendChild(styleElem);
module.exports = {}

style-loader的使用：

module:{
	rules:[
		{
            test:/\.css$/,
         	use:["style-loader","css-loader"]
         }]
}

5、mini-css-extract-plugin

mini-css-extract-plugin：因爲css-loader轉換css代碼後，交給style-loader進習性處理，sytle-loader是用一段js代碼，將樣式加到style文件中。而我們通常更需要的是生成一個css文件。於是就有了庫mini-css-extract-plugin，這個庫提供了一個plugin和一個loader：

plugin：負責生成css文件
loader：負責記錄要生成的css文件的內容，同時導出開啓css-module後的樣式對象

const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader?modules"]
               
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename:"[name].[hash:5].css"
        }) //負責生成css文件，name是chunk的name
    ]
}

6、cache-loader

cache-loader：可以將loader的解析結果保存下來，讓後續的解析直接使用緩存的結果，當然這種方式會增加第一次構建時間，要將cache-loader放在最前面，雖然放在最前面，但是他可以決定讓後續loader是否運行。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['cache-loader', ...loaders]
      },
    ],
  },
};

webpack內置插件

所有的webpack內置插件都作爲webpack的靜態屬性存在的，使用下面的方式即可創建一個插件對象

const webpack = require("webpack")
new webpack.插件名(options)

DefinePlugin：全局常量定義插件，使用該插件通常定義一些常量值。在源碼中，我們可以直接使用插件中提供的常量，當webpack編譯完成後，會自動替換爲常量的值

const webpack = require("webpack")
module.export = {
    plugins:[
        new webpack.DefinePlugin({
            PI: `Math.PI`, // PI = Math.PI
            VERSION: `"1.0.0"`, // VERSION = "1.0.0"
        })
    ]
}

BannerPlugin：它可以爲每個chunk生成的文件頭部添加一行註釋，一般用於添加作者、公司、版權等信息

const webpack = require("webpack")
module.export = {
    plugins:[
        new webpack.BannerPlugin({
          banner: `hash:[hash]
                  chunkhash:[chunkhash]
                  name:[name]
                  author:llk
                  corporation:xxx`
        })
    ]
}

ProvidePlugin：自動加載模塊，而不必到處 import 或 require 。我們可以在任意源碼中直接使用$和_

const webpack = require("webpack")
module.export = {
    plugins:[
        new webpack.ProvidePlugin({
          $: 'jquery',
          _: 'lodash'
        })
    ]
}

webpack-dev-server開發服務器和 webpack中常用plugin和loader

webpack-dev-server：開發服務器

webpack常用插件

1、clean-webpack-plugin

2、html-webpack-plugin

3、copy-webpack-plugin

4、bundle analyzer

5、compression-webpack-plugin

webpack常用loader

1、file-loader

2、url-loader

3、css-loader

4、style-loader

5、mini-css-extract-plugin

6、cache-loader

webpack內置插件

Promise源碼分析（附帶Promise的正確打開方式）

Spark葵花寶典：一小時速成Spark

Flex彈性盒子詳解：從量變到質變的理解

一篇文章帶你“深入”瞭解vue的計算屬性computed和偵聽屬器watch

ES6學習筆記篇三之類和符號

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

linux以太網驅動總結

webpack-dev-server開發服務器 和 webpack中常用plugin和loader

webpack-dev-server：開發服務器

webpack常用插件

1、clean-webpack-plugin

2、html-webpack-plugin

3、copy-webpack-plugin

4、bundle analyzer

5、compression-webpack-plugin

webpack常用loader

1、file-loader

2、url-loader

3、css-loader

4、style-loader

5、mini-css-extract-plugin

6、cache-loader

webpack內置插件

webpack-dev-server開發服務器和 webpack中常用plugin和loader