webpack4配置(2)-publicPath

時間 2019-12-06

標籤 webpack4 webpack 配置 publicpath 简体版

原文原文鏈接

在使用webpack-dev-server開發的時候，訪問資源路徑出了不少問題，挖了不少坑，找了一些資料，本身跟着敲了一下，現記錄一下。
參考博客：
webpack 配置 publicPath的理解
這篇博客寫的output裏的publicPath,寫的很詳細很清楚了css

webpack與webpack-dev-server

webpack新手入門的教程裏，在寫package.json文件時，一般設置爲：html

"script":{
    "build":"webpack --config webpack.config.js",
    "dev":"webpack-dev-server --config webpack.config.ks"
}
複製代碼

這是由於在開發過程當中，一般使用webpack-dev-server，由於具備熱更新功能，而在生產時，則是使用webpack打包成js文件。
publicPath解釋最多的是說訪問靜態資源時的路徑，當咱們把資源放到CDN上的時候，把 publicPath設爲CDN的值就好了，這種使用方法適用於生產環境，而使用webpack-dev-server開發時,publicPath指的是使用webpack-dev-server打包後生成的資源存放的位置。
默認狀況下，webpack-dev-server打包的資源放在根目錄下，即localhost:8000/下，只是它打包的資料是存放在內存中，在項目目錄裏看不到，打開瀏覽器的開發者模式，在source裏能夠看到。
用webpack敲博客案例試一下，分爲兩種狀況，手動建立html文件和使用html-webpack-plugin插件建立html兩種狀況。webpack

手動建立html

webpack-demo
   |-src
       |-index.js  --入口文件
       |-img
           |-big.png
   |-index.html  --根頁面
   |-webpack.config.js
   |-package.json
複製代碼

各自寫入測試代碼

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack Tut</title>
</head>
<body>
</body>
</html>
複製代碼

經過js動態建立圖片

// src/index.js

import img from './img/big.png';

var imgElement = document.createElement('img');
imgElement.src = img;
document.body.appendChild(imgElement);
複製代碼

配置路徑

// webpack.config.js

const path = require('path');

module.exports = {
   entry: path.join(__dirname, 'src/index.js'),
   output: {
       path: path.join(__dirname, 'dist'),
       filename:'bundle.js'
   },
   module: {
       rules:[
           {
               test: /\.(png|jpg)$/,
               loader: 'url-loader',
               options: {
                   limit: 3000,
                   name: '[name].[hash:8].[ext]'
               }
           }
       ]
   }
}
複製代碼

首先使用webpack-dev-server打包，按照前面說的，默認狀況下打包路徑在根目錄下，因此在index.html中使用'scr="./bundle.js"'來引入js文件，npm run dev後打開localhost:8000能夠看到圖片已經加載出來。webpack-dev-server默認尋找運行該命令的路徑下的index.html文件，此時項目根目錄有該文件因此就開始解析。 web

打開控制檯查看source,全部資源確實在根目錄下。

如今使用webpack打包，打包後以服務器的方式打開index.html，由於打包後的文件要發佈到服務器上，經過vscode的live-server插件來實現。打包後右擊index.html,選擇open with live server，而後發現頁面空白，出現錯誤。是由於在配置文件中，咱們指定全部資源打包到dist文件下(output.path決定的)，因此更改頁面中的 src="./dist/bundle.js",再從新打包查看，發現js文件已經加載成功，可是圖片路徑不對，圖片是相對於根目錄的，可是圖片資源如今存在dist文件夾下。

這是由於，圖片打包時的存放路徑=output.path + url-loader裏設置的name，對於案例就是 /dist/big.[hash].png

可是打包後發佈到服務器上訪問時，/big.[hash].png的路徑是相對於默認的根目錄，就變成了localhost:8000/big.[hash].png，致使訪問不到，因此設置 puhcliPath:'/dist/'，就能夠訪問到資源。
因此當有外部頁面請求資源時，將publicPath與path的值設置爲同樣就能夠了。

自動建立html

刪除根目錄下的index.html，而後安裝html-webpack-plugin自動建立html.npm

// webpack.config.js
const path = require('path');

// 引入webpack 和 html-webpack-plugin插件
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename:'bundle.js',
        publicPath: '/dist/'
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: '[name].[hash:8].[ext]'
                }
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin() // 使用插件
    ]
}
複製代碼