webpack自动编译

Question

webpack配置自动编译用到webpack-dev-server，如下配置：

为什么一定要配置publicPath，而且一定要写成publicPath:'/dist/'才有作用，自己之前写成了
publicPath:'/assets/'怎么都没用，浪费了好久的时间，哪位朋友解释一下。目录结构如下：

是不是因为编译后没有assets文件夹了？
这个publicPath的作用很不理解，官网的教程看了但是不理解~~~

Answer 1

1、为什么一定要写 publicPath ？

这个变量 publicPath 也就是你静态文件存放的目录。

举个例子，比如你的项目最终发布的时候，静态文件不是放在自己的服务器上，而是全部上传到 又拍云 等 cdn 服务商那里。这里就要写你静态文存放在又拍云的地址的前缀。也就是，分本地开发和发布部署两种情况。

2、一定要写成 publicPath:'/dist/' 才有作用？

不是的。

因为你上面定义了

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

所以打包后的文件都放在了 ./dist 目录。因此，你静态文件目录就需要配置 publicPath:'/dist/'

Answer 2

1.并不一定要配置 publicPath的

output中的path，指的就是，打包后的输出目录。

先说我配置的path输出： path: path.join(__dirname, './dist')，跟lz的有点区别。

至于解决 打包后，没有assets文件夹，我是这么做的：

安装 copy-webpack-plugin 插件，并且require进来，在需要发布到生产的配置中，加上：

new CopyWebpackPlugin([
            {
                from: path.join(__dirname, 'src/assets'),
                to: path.join(__dirname, 'dist/assets')
            },
        ])

等于是把assets文件夹拷贝过去。

2.对publicPath的理解和使用
第一种情况的使用场景是，把index.html也打进 /dist 文件夹下，一起发布。
这时，index.html里的，相对路径就像这样：'/img/...'、'/build.js'

而如果index.html不在 /dist文件下，相对路径要变成下面这样，才能正确引用：
'/dist/img/...'、'/dist/build.js'
所以，这时就要用到publicPath了，配置 publicPath:'/dist/'之后，包内的相对引用路径都会自动线加上/dist/