webpack和webpack-dev-server区别解析

大家好，我是小庄，一个专心于互联网技术的深漂打工人。

我们都知道，webpack和webpack-dev-server这两者自身是有区别的，以及在这两者中使用output.publicPath，效果也是不同的，如何不同呢？

今天，小庄就来总结一下webpack和webpack-dev-server的区别，以及实践解析一下，在webpack和webpack-dev-server中使用output.publicPath的区别。

一、两者区别

webpack和webpack-dev-server的区别如下：

1、区别1 —— 自身功能不同。

webpack：仅用于构建项目。

具体功能：一个模块打包器，根据entry指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到output字段指定的文件中。

webpack-dev-server：一个服务器插件，相当于webpack+apache（或者其它web服务器）

具体功能：使用webpack-dev-server相当于启动了一个web服务，且webpack-dev-server具有实时更新修改的功能。并且启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。

2、区别2 —— 使用output.publicPath的效果不同。该区别详见以下webpack官方文档解析+ 实践解析。

二、文档解析

output.publicPath

Type:

function
string

targets 设置为 web 与 web-worker 时 output.publicPath 默认为 'auto'，查看该指南获取其用例

对于按需加载(on-demand-load)或加载外部资源(external resources)（如图片、文件等）来说，output.publicPath 是很重要的选项。如果指定了一个错误的值，则在加载这些资源时会收到 404 错误。

此选项指定在浏览器中所引用的「此输出目录对应的公开 URL」。相对 URL(relative URL) 会被相对于 HTML 页面（或标签）解析。相对于服务的 URL(Server-relative URL)，相对于协议的 URL(protocol-relative URL) 或绝对 URL(absolute URL) 也可是可能用到的，或者有时必须用到，例如：当将资源托管到 CDN 时。

该选项的值是以 runtime(运行时) 或 loader(载入时) 所创建的每个 URL 为前缀。因此，在多数情况下，此选项的值都会以 / 结束。

规则如下：output.path 中的 URL 以 HTML 页面为基准。

webpack.config.js

const path = require('path');module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'public/assets'),
    publicPath: 'https://cdn.example.com/assets/',
  },};

对于这个配置：

webpack.config.js

module.exports = {
  //...
  output: {
    publicPath: '/assets/',
    chunkFilename: '[id].chunk.js',
  },};

对于一个 chunk 请求，看起来像这样 /assets/4.chunk.js。

对于一个输出 HTML 的 loader 可能会像这样输出：

或者在加载 CSS 的一个图片时：

background-image: url(/assets/spinner.gif); webpack-dev-server 也会默认从 publicPath 为基准，使用它来决定在哪个目录下启用服务，来访问 webpack 输出的文件。

注意，参数中的 [fullhash] 将会被替换为编译过程(compilation) 的 hash。详细信息请查看指南 - 缓存。

示例：

module.exports = {
  //...
  output: {
    // One of the below
    publicPath: 'auto', // It automatically determines the public path from either `import.meta.url`, `document.currentScript`, `<script />` or `self.location`.
    publicPath: 'https://cdn.example.com/assets/', // CDN（总是 HTTPS 协议）
    publicPath: '//cdn.example.com/assets/', // CDN（协议相同）
    publicPath: '/assets/', // 相对于服务(server-relative)
    publicPath: 'assets/', // 相对于 HTML 页面
    publicPath: '../assets/', // 相对于 HTML 页面
    publicPath: '', // 相对于 HTML 页面（目录相同）
  },};

在编译时(compile time)无法知道输出文件的 publicPath 的情况下，可以留空，然后在入口文件(entry file)处使用自由变量(free variable) webpack_public_path，以便在运行时(runtime)进行动态设置。

__webpack_public_path__ = myRuntimePublicPath;// 应用程序入口的其他部分

有关 webpack_public_path 的更多信息，请查看此讨论。

三、实践解析

1、注意： 首先，关于webpack极速配置技巧，详见上一节「前端工程化&掌握webpack极速配置技巧」，本节将沿用上一节已经配置好的项目。

2、实践部分： （1）当配置了output.publicPath时，使用webpack打包项目的效果：

如下为webpack.config.js的全部配置，重点看output的配置；

/*

    以下为webpack的极速配置示例
 */
const path  = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // mode分为development 和 production
    mode: 'development',
    entry: {
        index: path.resolve(__dirname, './src/js/index.js'),
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/test',
        // 注意：[name]是一个变量, [name].js将对应entry中的index.js
        filename: 'js/[name].js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: path.resolve(__dirname, './node_modules')
            },
            {
                test: /\.css$/,
                // 注意：webpack中的使用loader时，是倒序处理的，所以use中同样需要倒序放置
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }, 
            {
                test: /\.tpl$/,
                loader: 'ejs-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 1、打包后的文件名称
            filename: 'index.html',
            // 2、要打包的html模版, 即index.html
            template: path.resolve(__dirname, './src/index.html'),
            /*
                3、要在打包后的index.html中引入的js文件, 
                  其中, 数组chunks中存放的是entry对象的key,
                  而这里是key值是index。
             */
            chunks: ['index'],
            /*
                4、要在打包后的index.html中排除引入的js文件, 
                  其中, 数组excludeChunks中存放的是entry对象的key,
                  而这里是key值是node_modules, 如果entry中的key值没
                  有node_modules也没关系，写上也不会报错。
             */
            excludeChunks: ['node_modules']
        })
    ],
    devServer: {
        open: true,
        host: 'localhost',
        port: 3300
    }
};

在package.json中，如下红框为webpack打包项目的命令配置；

在终端使用npm run webpack，查看效果；

npm run webpack

对比没有使用output.publicPath，查看效果；

总结；

用户使用webpack打包项目，并且指定了output.publicPath时，webpack 会在静态⽂件路径(webpack本身是专门用来处理js文件的，所以这里的静态文件路径，一般可以理解为js文件路径)前⾯添加publicPath的值。以此类推，当我们计划把静态资源放到CDN上的时候，把publicPath的值设为CDN的值就可以了。

（2）当配置了output.publicPath时，使用webpack-dev-server打包项目的效果：

webpack.config.js的全部配置同上；
在package.json中，如下红框中，为webpack-dev-server打包项目的命令配置；

在终端使用npm run dev，查看效果；

npm run dev

对比没有使用output.publicPath，查看效果；

总结；

用户使用webpack-dev-server打包项目，并且指定了output.publicPath时：
除了会出现webpack打包项目同样的效果外，webpack-dev-server还会把index.html打包到publicPath指定的⽬录。所以我们需要使用localhost:3300/test才能访问得到资源。
也就是官网所说，webpack-dev-server 会默认从 publicPath 为基准，使用它来决定在哪个目录下启用服务，来访问 webpack 输出的文件。
但是这样访问有点不太⽅便了，最简单的办法，就是把publicPath配置去掉，这样webpack-dev-server就会把⽂件打包到根⽬录下，localhost:3300就会访问到，去掉之后重启服务器。

四、补充部分

关注公zhong号：【深漂程序员小庄】：内含丰富的学习资源和面试经验（不限前端、java、算法），还有学习交流群可加，并且还有各大厂大佬可一起交流学习，一起进步～添加小庄微信，回复【加群】，可加入互联网技术交流群。