Skip to content

Latest commit

 

History

History
53 lines (50 loc) · 1.72 KB

README.md

File metadata and controls

53 lines (50 loc) · 1.72 KB

说明文档

webpack 配置注意事项

  • 使用 webpack-dev-server 与 react-hot-loader 启动热加载时，应该指定publicPath，并且不能与path相同。 页面加载的脚本路径也要修改为publicPath
//webpack.config.js
  output: {
    path: path.join(__dirname + '/public/'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  devServer: {
    publicPath: '/'
  }
<!--index.html-->
<body>
  <div id="container"></div>
  <script src="/bundle.js"></script>
</body>
  • entry中的服务器路径与devServer的配置相对应
//webpack.config.js
  entry: [
    'webpack-dev-server/client?http://localhost:4000',
  ],
  devServer: {
    host: 'localhost',
    port: 4000,
  }
  • only-dev-server与dev-server的区别 简单来讲，在某些需要刷新浏览器的情况下，only-dev-server提示刷新，而dev-server自动帮你刷新
  entry: [
    'webpack-dev-server/client?http://localhost:4000',
    'webpack/hot/only-dev-server',
    './public/js/entry'
  ],

webpack 构建

  • 开发调试的构建使用 npm run dev，生产环境的构建使用npm run pub
  • 性能分析文件生成使用npm run profile，在根目录找到profile.json，并上传到http://alexkuz.github.io/webpack-chart/
  • 预渲染组件并生成静态文件npm run server

package 包

  • eslint eslint-plugin-react babel-eslint 是代码检查相关的工具，与构建无关。
  • whatwg-fetch与es6-promise主要是为了支持 IE，虽然可以页面引入，但是与业务逻辑一起编译较为划算，二者加起来只增加了 14K 的体积。如果页面引入，光promise.min.js就有 18K。