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

This topic created in 2635 days ago, the information mentioned may be changed or developed.

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 replies • 2019-02-22 17:24:17 +08:00

TomVista

Feb 22, 2019

```
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

Feb 22, 2019

不同环境用不同配置文件

TomVista

Feb 22, 2019

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

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

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

到时候复制粘贴走起..