最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【整理】webpack中output的path和publicPath和webpack-dev-server的devServer的contentBase和publicPath的区别和作用

Webpack crifan 2160浏览 0评论

折腾:

【或许解决】webpack-dev-server出错:localhost无法加载bundle.js

时,对于webpack-dev-server的打开主页

http://localhost:3000/

却出错:

GET http://localhost:3000/vendor.bundle.js 404

GET http://localhost:3000/index.js 404

的错误,始终没有很清晰的概念,也不太理解,为何出错。

以及解决办法感觉也是很临时的,没有彻底理解问题原因和找到根本解决办法。

经过后续的折腾,算是明白了。

现在总结如下:

对于:

webpack.config.js

中的:

output的path和publicPath

和:

devServer的contentBase和publicPath

期间参考了:

webpack publicPath

What does “publicPath” in webpack do? · Issue #1791 · webpack/webpack

configuration

[译] Webpack——令人困惑的地方 – dmyang – SegmentFault

【output的path】

先说:

output的path

比如此处的:

  entry: {
    index: ‘./src/index.js’,
    vendor : [
      ‘react-hot-loader/patch’,
      ‘./src/adminlte_app.js’
    ],
  },
  output: {
    path: path.resolve(__dirname, ‘build’),
    filename: ‘[name].js’,
  },

这个比较清楚,指的是:

webpack打包后,输出文件放到哪里去

比如此处的output为build,则:

原先build文件夹下面是没有文件的:

经过运行webpack去打包:

➜  react-hot-boilerplate git:(master) ✗ webpack –progress –colors
process.env.NODE_ENV=undefined, isProd=false
Hash: 6d94e9384935c2670f79
Version: webpack 3.5.4
Time: 33668ms
           Asset     Size  Chunks                    Chunk Names
        index.js  5.38 MB       0  [emitted]  [big]  index
vendor.bundle.js    32 kB       1  [emitted]         vendor
[212] (webpack)/buildin/module.js 623 bytes {0} [built]
[243] (webpack)/buildin/global.js 1.21 kB {0} [built]
[309] ./src/index.js 573 bytes {0} [built]
[407] ./src/App.js 15.9 kB {0} [built]
[779] ./src/app.css 994 bytes {0} [built]
[780] ./node_modules/css-loader!./src/app.css 1.05 kB {0} [built]
[784] multi react-hot-loader/patch ./src/adminlte_app.js 40 bytes {1} [built]
[788] ./src/adminlte_app.js 23 kB {1} [built]
    + 781 hidden modules

输出对应的文件到build文件夹中了:

【output的publicPath】

对于output的publicPath来说,虽然也看了很多:

【部分解决】Webpack中output中publicPath的作用

但是自己折腾了半天,包括:

【已解决】wepack打包时出错:Module parse failed jpg Unexpected character

但是却没有得到想要的那种效果:

webpack自动把url的地址,改为publicPath的地址。

【后记1】

后来在折腾:

【已解决】ReactJS中Webpack打包时分离css

的时候,的确看到了less被处理后,被ExtractTextPlugin插件提取后,最终的css中url是被加上了:

output的publicPath的地址的

background-image:url(/adminlte/dist/img/user1-128x128_vykxhX.jpg)

【devServer的contentBase】

此处,对于使用webpack-dev-server来说,此处指的是,从哪里开始加载页面,

即从哪个路径下去找index.html去加载和运行。

所以,如果没有设置contentBase或contentBase为空””的话,则是从webpack.config.js所在文件夹(即项目根目录)下去寻找

-》这往往是错误的。

-》往往是,项目文件被编译build到对应的output的path文件夹了

此处是

  output: {
    path: path.resolve(__dirname, ‘build’),

这里才有想要加载的index.html

所以,此处的设置往往是:

devServer的contentBase等于:output的path

  output: {
    path: path.resolve(__dirname, ‘build’),
。。。
  },
  devServer: {
    contentBase: path.resolve(__dirname, ‘build’),

如此,运行webpack-dev-server后,再去打开页面:

http://localhost:3000/

(或设置了devServer的publicPath为/adminlte/后的,打开:

http://localhost:3000/adminlte/

就可以正常显示页面了。

总之:

devServer的contentBase,一定要指定为index.html(以及对应的app.js,index.js,vendor.js等所在的路径)

且往往和output.path的值是一样的,比如此处的:

  output: {
    path: path.resolve(__dirname, ‘build’),
},
  devServer: {
    contentBase: path.resolve(__dirname, ‘build’),

【devServer的publicPath】

而对于devServer的publicPath,此处调试期间发现:

如果不去设置:

    // publicPath: path.resolve(__dirname, ‘/adminlte/’),

或者设置devServer的publicPath为空””,则

npm run dev

之后,不论是

http://localhost:3000/

还是:

http://localhost:3000/adminlte/

都可以(基本)正常运行。

只不过是:

http://localhost:3000/adminlte/

时,有些图片的地址是无法加载的:

user2-160×160.jpg:1 GET http://localhost:3000/adminlte/dist/img/user2-160×160.jpg 404 (Not Found)
user3-128×128.jpg:1 GET http://localhost:3000/adminlte/dist/img/user3-128×128.jpg 404 (Not Found)。。。
__webpack_require__ @ vendor.bundle.js:711
webpackJsonpCallback @ vendor.bundle.js:26
(anonymous) @ index.js:1
user4-128×128.jpg:1 GET http://localhost:3000/adminlte/dist/img/user4-128×128.jpg 404 (Not Found)

不过确定一点的是:

如果设置了publicPath:

    publicPath: path.resolve(__dirname, ‘/adminlte/’),

则只能是打开:

http://localhost:3000/adminlte/

才能正常加载页面的:

因为此处的devServer的publicPath,就是用于指定了webpack-dev-server从哪里开始加载页面的。

但是此处却很诡异,竟然访问:

http://localhost:3000/

也是可以看到页面的

和前面没有设置publicPath效果竟然是一样的。

难道是本地加载的index.html中的内容,决定了主页也可以访问?

好像不是,好像是:

Project is running at http://localhost:3000/
webpack output is served from /adminlte
Content not from webpack is served from /Users/crifan/dev/dev_root/daryun/Projectsxxx/sourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate/build
404s will fallback to /index.html

决定了访问错误的地址,会会滚到index.html?

又去试了试:

  devServer: {
    publicPath: path.resolve(__dirname, ‘/devServerPublicPath/’),

结果是:

输出:

Project is running at http://localhost:3000/
webpack output is served from /devServerPublicPath
Content not from webpack is served from /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate/build
404s will fallback to /index.html

然后访问:

http://localhost:3000/

可以显示页面,但是个别图片找不到:

http://localhost:3000/devServerPublicPath/

页面也可以显示,更多图片无法加载:

访问其他地址,比如:

http://localhost:3000/adminlte/

无法显示页面,且会找不到vendor.bundle.js和index.js

总之:

对于devServer的publicPath,设置为什么地址,比如此处的:

    publicPath: path.resolve(__dirname, ‘/devServerPublicPath/’),

 则webpack-dev-server调试的时候,就应该打开对应的地址才对:

http://localhost:3000/devServerPublicPath/

转载请注明:在路上 » 【整理】webpack中output的path和publicPath和webpack-dev-server的devServer的contentBase和publicPath的区别和作用

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
59 queries in 0.236 seconds, using 18.94MB memory