webpack 热替换,部署生产环境的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2092 天前的主题，其中的信息可能已经有所发展或是发生改变。

webpack.config.js 如下.

module.exports = {
    devtool: 'eval-source-map',
    entry:  __dirname + "/src/index.js",
    output: {
      path: __dirname + "/public",
      filename: "bundle.js"
    },
    mode:'development',
    devServer: {
      port:8080,
      contentBase: "./public",//本地服务器所加载的页面所在的目录
      historyApiFallback: true,//不跳转
      inline: true//实时刷新
    } 
  }

使用 webapck-dev-server 作为开发服务器,所有的打包后的 js 只能通过 http://loaclhost:8080/xxx.js 访问.

开发时也能使用相对路径访问 js.

使用 webpack 命令打包成 js 文件,原有的开发服务器引用路径都要修改,如何解决这个问题?

3 条回复 • 2019-02-22 17:24:17 +08:00

TomVista

2019-02-22 17:12:45 +08:00

```
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/src/index.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
mode:'development',
devServer: {
contentBase: __dirname,//本地服务器所加载的页面所在的目录
publicPath:"/dist/",
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
```

在 devServer 中使用 publicPath 选项

chairuosen

2019-02-22 17:15:26 +08:00

不同环境用不同配置文件

TomVista

2019-02-22 17:24:17 +08:00

@chairuosen devServer.publicPath 可以指定 webpack-dev-server 打包到内存中的 js 的访问路径.

最终的 js 路径为 contentBase+publicPath+name.js

把 webpack 命令的出口文件地址指向 contentBase+publicPath,这样就统一了开发和部署的目录结构.

到时候复制粘贴走起..