webpack

webpack 的output 配置项一开始会觉得有点困惑，一个是path, 一个是publicPath, 一开始非常不理解为什么会有两个path，配置

场景1

src\
  |- app.js
  |- util.js
dist\
public\
  |- index.html

假设我的项目目录结构是这样的，src中放的是js源码，public中放的是html， 通常我不希望把编译出来的js和src一同提交到git仓库中，我只希望提交src目录，所以我需要将构建出来的文件放到dist目录下

这可以通过output的path目录来指定

var path = require('path');

module.exports= {
  context: path.resolve('js'),
  entry: ['./util.js', './app.js'],
  output： {
    path: path.resolve('dist/js/')，
    filename: 'bundle.js'
  }
}

在index.html中就能这样引用js

<script src="/dist/js/bundle.js"></script>

但很多时候，在本地开发的时候和部署到服务器上的js路径是不同的，我希望在在服务器上通过 pubilc/assets/js/bundle.js 这个路径来引用，这时候就能用 publicPath

var path = require('path');

module.exports= {
  context: path.resolve('js'),
  entry: ['./util.js', './app.js'],
  output： {
    path: path.resolve('dist/js/')，
    publicPath: '/public/assets/js/',
    filename: 'bundle.js'
  }
}

这样当我请求 public/assets/js/bundle.js 的时候, webpack-dev-server会代理到path的目录下面。 在我本地开发的时候，只要将Js编译到dist目录下面，并且把这个目录加到.gitignore中，当部署到服务器时，把js发布到/public/assets/js目录下面

还剩下一个问题，我现在把index.html放在public目录下面，这样我就要通过 http://localhost:8080/public/index.html来访问，但实际上我希望通过访问根目录，http://localhost:8080/index.html 来访问

可以通过

devServer: {
  contentBase: 'public'
}