精华内容
下载资源
问答
  • 在webpack模块化开发的过程中,发现webpack.config.js配置文件的输出路径总有一个path与publicPath,不解其意。 module.exports = { output: { path: path.resolve("./examples/dist"), filename: "app.js", ...
  • webpack的path和publicPath以及dev-server的publicPath是否清楚呢,一起来看看吧
    • output.path

    string
    output 目录对应一个绝对路径。

    module.exports = {
      //...
      output: {
        path: path.resolve(__dirname, 'dist/assets')
      }
    };
    

    作用:输出到物理硬盘上的

    • output.publicPath

    string: '' function

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

    此选项指定在浏览器中所引用的「此输出目录对应的公开 URL」。相对 URL(relative URL) 会被相对于 HTML 页面(或 <base> 标签)解析。相对于服务的 URL(Server-relative URL),相对于协议的 URL(protocol-relative URL) 或绝对 URL(absolute URL) 也可是可能用到的,或者有时必须用到,例如:当将资源托管到 CDN 时。
    大白话:用于引导静态资源(js,css,img),比如在页面引入了background-image:url(’/static/people.png’); 这时候这里的路径就会相对publicPath做调整;指的是将来这些静态资源将会放到哪,有线上静态资源存放的路径决定的

    • devServer.publicPath

    string '/'
    此路径下的打包文件可在浏览器中访问。
    假设服务器运行在 http://localhost:8080 并且 output.filename 被设置为 bundle.js。默认 devServer.publicPath'/',所以你的包(bundle)可以通过http://localhost:8080/bundle.js 访问。
    修改 devServer.publicPath,将 bundle 放在指定目录下:
    webpack.config.js

    module.exports = {
      //...
      devServer: {
        publicPath: '/assets/'
      }
    };
    

    现在可以通过 http://localhost:8080/assets/bundle.js 访问 bundle。
    总的一句话就是:指哪就访问哪

    更详细的可以看文档:webpack官方文档
    之前看到的一篇掘金文章也不错。

    展开全文
  • 最近自己在搭建一个基于webpack的react项目,遇到关于output.publicPath和webpack-dev-server中publicPath的问题,而官方文档对它们的描述也不是很清楚,所以自己研究了下并写下本文记录。 output output选项指定...
  • 在webpack的配置文件中,output和devServer中都可以设置一个publicPath属性,那么两者的作用有什么不同呢?嗯、稍微的分析一下1、publicPath在output属性里面,设置的其实是一个基础的路径,它会为我们所有的资源都...

    在webpack的配置文件中,output和devServer中都可以设置一个publicPath属性,那么两者的作用有什么不同呢?嗯、稍微的分析一下

    1、publicPath在output属性里面,设置的其实是一个基础的路径,它会为我们所有的资源都应用上publicPath设置的值,然后再接上资源对应转换出来的路径,怎么理解呢,看一下例子就知道了

    我们在配置文件中设置了一下的值

    output:{
            path:path.resolve(__dirname,'dist/asset'),
            filename:'js/main.js',
            publicPath: "asset/"
        }

    然后我们执行npm run dev进行打包处理,然后看一下,我们index.html中引入的main.js的路径如下所示

    <script type="text/javascript" src="asset/js/main.js"></script>

    我们看到的asset/就是我们在output中设置的值,然后打包之后,它就会加在了js输出的路径上面,成为main.js的基础路径,当然这样使用有可能是会挂掉的,我这里只是举一个小小的例子,真正用的时候还是要视情而定

    2、devServer中的publicPath

    先稍微介绍一下devServer:当你启动DevServer时,资源还是会打包,但它打包资源之后,这些资源不会放到我们的本地目录里面,而是会放到内存里面,所以我们的DevServer是会到内存里面去查找我们打包好的内容,除了去内存中查找内容以外,它还会到本地目录中查找内容,那devServer中有一个contentBase属性可以控制它去哪里访问本地目录的资源

    contentBase默认是当前的工作目录,当它查不到打包在内存中的资源的时候,它就会到contentBase中去找

    OK、进入正题:devServer中也有一个publicPath值,它是服务器所打包资源后的输出路径

    如果我们没有给它这个值,它就会去拼凑output中publicPath中的值,但如果在DevServer中设置了publicPath,那它就不会去管output中publicPath设置的值了

    看例子:在devServer中我们没有设置publicPath,然后output中还是上面例子中的设置,那么此时我们看当我们运行服务器的时候,命令行中会有这样的一句代码

     webpack output is served from /asset/

    注意这里的/asset是output中设置的publicPath的值,后面的“/”,devServer的默认值(当我们没有给它设置值的时候,它的默认值就是“/”)

    那,如果我们为devServer中的publicPath设置了值,看例子

     output:{
            path:path.resolve(__dirname,'dist/asset'),
            filename:'js/main.js',
            publicPath: "asset/"
        },
        devServer: {
            contentBase: './dist',
            publicPath:"/"
      }
    运行服务器的时候,命令行输出的代码是这样的
    webpack output is served from /

    说了这么多,其实就是为了理解publicPath的不同作用,实际的应用中,我们更倾向于将output和devServer中的publicPath都设置为“/”

    那总结一下:output中的publicPath是资源打包的基础路径,output中的path才是设置的资源打包后的输出路径

    devServer中的publicPath设置的是资源会被打包到哪里

    展开全文
  • 几种设置publicPath后,再对比打包后的index.html文件 测试背景: 每次打包build完后,都单独生成一个/dist文件夹,且dist中每次都只有相同文件目录 部署的时候,是部署在服务器的一个/test文件夹... // publicPath:
  • file-loader的publicPath、outputPath 目录结构: 当没有设置publicPath和outputPath时: { test: /\.(png|jpg|gif|jpeg)$/, use: [ { loader: 'url-loader', options: { //当加载的图片小于limit时,会将...

    file-loader的publicPath、outputPath

    目录结构:
    在这里插入图片描述

    • 当没有设置publicPath和outputPath时
    {
      test: /\.(png|jpg|gif|jpeg)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            //当加载的图片小于limit时,会将图片编译成base64字符串的格式(limit单位 byte)
            //当加载的图片大于limit时,需要使用file-loader模块进行加载
            limit: 17600,
            name:'[path][name]_[hash:8].[ext]',
          }
        }
      ]
    }
    

    文件输出目录为:/dist/src/img/xz2_94f1d0a1.jpg
    运行结果:在这里插入图片描述

    • 只设置outputPath 输出目录
    {
      test: /\.(png|jpg|gif|jpeg)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 17600,
            name:'[path][name]_[hash:8].[ext]',
            outputPath:'imgs/',
          }
        }
      ]
    }
    

    文件输出目录为:/dist/imgs/src/img/xz2_94f1d0a1.jpg
    运行结果:在这里插入图片描述

    • 设置outputPath和publicPath 或者 只设置publicPath
      publicPath为发布目录
    {
      test: /\.(png|jpg|gif|jpeg)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 17600,
            name:'[path][name]_[hash:8].[ext]',
            outputPath:'imgs/',
            publicPath:'assets/'
          }
        }
      ]
    }
    

    文件输出目录为:/dist/imgs/src/img/xz2_94f1d0a1.jpg
    运行结果:此时运行结果会找不到该文件在这里插入图片描述
    原因:项目发布后,需要将一些文件放置在一个统一的文件夹内管理,outputPath 所设置的路径,是相对于 webpack 的输出目录,
    解决:在发布后的文件夹内,需要将输出的文件放置在发布目录(publickPath)内,即:/dist/assets/imgs/src/img/xz2_94f1d0a1.jpg
    在这里插入图片描述

    • outputPath vs publicPath
      outputPath 仅仅告诉 webpack 结果存储在哪里,然而 publicPath 选项则被许多 webpack 的插件用于在生产模式下更新内嵌到 css、html 文件内的 url 值。例如:
      在这里插入图片描述

    output的path、publicPath

    • path
      仅仅告诉Webpack结果存储在哪里,必须是绝对路径,比如:output输出的js,url-loader解析的图片,HtmlWebpackPlugin生成的html文件,都会存放在以path为基础的目录下
    • publicPath
      并不会对生成文件的路径造成影响,主要是在生产模式下,对你的页面里面引入的资源的路径做对应的补全,常见的就是css文件里面引入的图片、html文件里的url值,功能和file-loader的publicPath一致
      file-loader的publicPath其实对应覆盖的是output.publicPath

    以上的示例中,我们使用了 [path] , [name] , [hash] 和 [ext] 占位符,它们对应的含义是:

    • [ext]:String,默认值为 file.extname,表示资源扩展名;
    • [name]:String,默认值为 file.basename,表示资源的基本名称;
    • [path]:String,默认值为 file.dirname,表示资源相对于 context 的路径;
    • [hash]:String,默认值为 md5,内容的哈希值,支持灵活的 hashes 配置,对应的说明如下:
      在这里插入图片描述
    • [N] :N 是数值类型,表示当前文件名按照查询参数 regExp 匹配后获得到第 N 个匹配结果。

    转载:https://www.jianshu.com/p/dcb28b582318
    转载:https://www.jb51.net/article/150301.htm

    展开全文
  • 长期以来,一直都比较迷惑,不知道publicPath属性的作用,最近抽空,花了点时间研究了下,参考了几篇文档,自己测试了几遍,最后得出了以下几点心得,如有不对,欢迎佐证。 1.当手动创建html时,也就是当我们的工程...

    长期以来,一直都比较迷惑,不知道publicPath属性的作用,最近抽空,花了点时间研究了下,参考了几篇文档,自己测试了几遍,最后得出了以下几点心得,如有不对,欢迎佐证。

    1.当手动创建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>Document</title>

    </head>

    <body>

    <div id="root">

     

    </div>

    <script type="text/javascript" src="main.js"></script></body>

    </html>

     

    此时webpack配置为

     

    let config = {

    entry: {

    main: ['./app/App.js']

    },

    output: {

    path: path.resolve(__dirname, 'dist/assets'),

    filename:  '[name].js'

    },

    module: {

    rules: [

    {

    test: /\.js$/,

    exclude: /(node_modules|bower_components)/,

    use: {

    loader: 'babel-loader',

    options: {

    presets: ["@babel/preset-env", "@babel/preset-react"]

    }

    }

    }

    ]

    },

    plugins: [

    new HtmlWebpackPlugin({

    template: './src/index.html'

    }),

    new webpack.NamedModulesPlugin(),

    new webpack.HotModuleReplacementPlugin()

    ],

    devServer: {

    contentBase: path.join(__dirname, "dist"),//devServer的根目录

    hot: true,

    port: 9000,

    host: 'localhost'

    }

    }

     

    package.json里面的命令如下

    "scripts": {

    "dev": "node_modules/.bin/webpack-dev-server",

    "build": "node_modules/.bin/webpack --config webpack.config.js",

    "watch": "webpack --watch"

    },

    当我们在命令行里面运营npm run dev,在浏览器里面输入http://localhost:9000/ 可以看到我们的index.html里面已经有内容呈现,并且实现了热替换,本次demo是基于react开发的,旨在讲解publicPath的作用,react不作更多解释。

    此时假如我们运营npm run build,可以看到在我们的工程目录dist下面的assets里面已经生成了我们想要的main.js,但是通过在浏览器里面访问该html文件,可以看到里面界面是空白的。

    原因主要是webpack-dev-server打包生成的文件是写进了内存里面,浏览器控制台中的sources 面板下面可以看到。对应的路径根据根目录(此时的根目录是由devServer的contentBase属性设定的)而定,文件名是按照output定义的filename命名的,这个时候publicPath没有设置,即采用默认值“/”,固打包后在http://localhost:9000/main.js可以看到该文件,但并没有写进磁盘,所以此时通过webpack-dev-server打包可以正常访问内容

    2.当我们调整下publicPath的的值,

    publicPath: '/dist/assets/' 

    我们先执行npm run build ,此时在assets目录下面生成了main.js,这时将index.html引用路径改为src="/dist/assets/main.js"

    再运营npm run dev ,发现访问http://localhost:9000还是可以正常访问页面内容,这个时候将index.html的引用路径改为src="/assets/main.js",发现还是可以正常访问,此时如果将assets下面的main.js移除,则无法再正常访问了,再次证明了webpack-dev-server打包生成的文件是写进内存里面的,并且当在内存中找不到相关的依赖文件时,会在磁盘目录下去找,当找到时,则正常引入,找不到时则报错

    3.使用webpackHTMLplugin自动创建文件,

    plugins里面添加

    new HtmlWebpackPlugin({

    template: './src/index.html'

    }),

    运行npm run dev时,可以看到再用原来的路径已经访问不到页面了,改为http://localhost:9000/dist/assets/index.html又能正常访问了,但是磁盘目录下面依旧没有生成该文件,证明使用了webpackHTMLplugin之后还是在内存里面开辟了一片空间去存放打包文件

    假设此时再次改变打包之后html文件的存放地址,往assets的上一层目录存放

    new HtmlWebpackPlugin({

    template: './src/index.html',

    filename: '../index.html'

    }),

    此时再npm run dev ,发现不管怎么样都访问不到index.html了,说明使用HtmlWebpackPlugin时,在devServer模式下,是不能任意指定index.html的存放地址的,要么就手动在对应位置添加一个index.html

     

    展开全文
  • webpack path和publicPath作用

    万次阅读 2016-11-23 08:19:31
    publicPath:指定资源文件引用的目录 用处:例如在express中,指定了public/dist是网站的根目录,网站的源文件存放在public中,那么就需要设置path:”./dist”指定打包输出到该目录,而publicPath就需要设置为”/”...
  • webpack output.publicPath

    千次阅读 2018-11-22 14:08:44
    这篇文章用例子讲解我在webpack的学习过程中遇到的publicPath问题。 对于按需加载(on-demand-load)或加载外部资源(external resources)(如图片、文件等)来说,output.publicPath 是很重要的选项。如果指定了一个...
  • path与publicPath的区别

    千次阅读 2017-04-24 22:41:13
    前言在webpack模块化开发的过程中,发现webpack.config.js配置文件的输出路径总有一个path与publicPath,不解其意。module.exports = { output: { path: path.resolve("./examples/dist"), filename: "app.js", ...
  • Vue CLI4.0 webpack配置属性——publicPath

    千次阅读 2020-04-28 17:35:45
    publicPath Type: string Default: '/' 官方文档说明: 部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致,但是 Vue CLI 在一些其他地方也需要用到这个值,所以请始终使用 publicPath 而...
  • output.publicPath &amp;amp;amp; devServer.publicPath output里面的publicPath表示的是打包生成的index.html文件里面引用资源的前缀; devServer里面的publicPath表示的是打包生成的静态文件所在的位置(若是...
  • webpack/vue-cli 中的 publicPath / 和 ./ 的区别 在说这个问题之前,vue-cli 的配置文档已经说的非常清楚了 publicPath 而 webpack 对于 publicPath 的描述相对苍白。但是 vue-cli 对于我们来说也是一个黑盒子,...
  • webpack之publicPath

    千次阅读 2018-05-06 15:28:46
    前言:本文解决了《 webpack之输出路径处理 》最后预留的路径问题正文:要解决《 webpack之输出路径处理 》最后预留的路径问题,只需要在webpack.config.js的output选项中添加publicPath配置。执行npm run build,...
  • webpack 配置 publicPath的理解

    千次阅读 2018-12-28 14:16:41
    在学习webpack的时候,配置文件中有一个publicPath属性,一直不是很明白它到底是怎么用,也查了很多资料,得到最多的说法是当打包的时候,webpack会在静态文件路径前面添加publicPath的值,当我们把资源放到CDN上的...
  • vue-cli设置publicPath几种方式对比

    千次阅读 2020-06-11 09:40:29
    publicPath打包设置 1. 不设置(默认为 publicPath: ‘/’) 或者设置 publicPath: '/' // vue.config.js module.exports = { publicPath: '/', } html中被打包的css和js路径如下 <!DOCTYPE html> <...
  • webpack中 publicPath 跟 path 的区别

    万次阅读 2016-04-26 15:40:42
    自己发现,在写webpack.config的时候,output中为什么写了path,还要写publicPath,这两个有什么区别呢?
  • 解决 Automatic publicPath is not supported in this browser 错误 问题描述:webpack 打包出现 Error: Automatic publicPath is not supported in this browser 解决方法: 在webpack.config.js文件中添加 ...
  • webpack中output之path和publicPath详解

    万次阅读 2018-06-09 11:41:56
    publicPath:输出解析文件的目录,指定资源文件引用的目录 ,打包后浏览器访问服务时的 url 路径中通用的一部分。区别:path是webpack所有文件的输出的路径,必须是绝对路径,比如:output输出的js,url-loader解析的...
  • 理解webpack的publicPath

    千次阅读 2018-04-25 20:36:54
    要理解publicpath,先要理解资源是如何被打包的 资源打包 1. 新建项目 我们新建一个项目,目录结构如下 drwxr-xr-x 5 huangyue staff 160 4 25 18:31 dist drwxr-xr-x 661 huangyue staff 21152 4 25 16:...
  • webpack中的path和publicPath的作用

    千次阅读 2017-12-05 14:57:02
    output.path打包后文件在...)==输出为=》localdisk/path-to-your-project/build/output.publicPath打包后浏览器访问服务时的 url 路径(中通用的一部分)。例如:publicPath: /assets/==输出为=》http://server/a...
  • 解决 Automatic publicPath is not supported in this browser 错误 当webpack 打包出现 ERROR in Error: xxxx /******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser...
  • 新版Vue项目配置项目名称-publicPath-前端 v1.0.0 学生宫布 8416837 webpack 4.28.4 文章目录js配置 js配置 vue.config.js module.exports = { publicPath: process.env.NODE_ENV === "production" ? "/ui-pro...
  • webpack打包时Error: Automatic publicPath is not supported in this browser 在webpack.config.js中的output中添加publicPath:’/build(打包后存放的文件夹名)/’
  • webpack4配置(2)-publicPath

    千次阅读 2019-04-16 03:04:24
    在使用webpack-dev-server开发的...webpack 配置 publicPath的理解 这篇博客写的output里的publicPath,写的很详细很清楚了 webpack与webpack-dev-server webpack新手入门的教程里,在写package.json文件时,通常设置...
  • vue.config.js 是否为生产环境 const isProduction = process.env.NODE_ENV !== 'development' 配置 publicPath module.exports = { publicPath: isProduction ? 'portal' : '/' }
  • 搞清楚webpack配置文件中publicPath和contentBase的作用 ...
  • 刚从远程clone下来的代码,npm run dev... ERROR Invalid options in vue.config.js: "publicPath" is not allowed npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! iview-admin@2.0.0 dev: `vue-cli-service s...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,037,827
精华内容 415,130
关键字:

publicpath