React 实践
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
view
.babelrc
.eslintignore
.eslintrc
.gitignore
LICENSE
README.md
package.json
webpack.config.js
webpack.prod.config.js
webpack.server.config.js

README.md

说明文档

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-serverdev-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-fetches6-promise主要是为了支持 IE,虽然可以页面引入,但是与业务逻辑一起编译较为划算,二者加起来只增加了 14K 的体积。如果页面引入,光promise.min.js就有 18K。